index.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. import { createNamespace, isDef } from '../utils';
  2. import { PopupMixin } from '../mixins/popup';
  3. import Icon from '../icon';
  4. var _createNamespace = createNamespace('popup'),
  5. createComponent = _createNamespace[0],
  6. bem = _createNamespace[1];
  7. export default createComponent({
  8. mixins: [PopupMixin()],
  9. props: {
  10. round: Boolean,
  11. duration: [Number, String],
  12. closeable: Boolean,
  13. transition: String,
  14. safeAreaInsetBottom: Boolean,
  15. closeIcon: {
  16. type: String,
  17. default: 'cross'
  18. },
  19. closeIconPosition: {
  20. type: String,
  21. default: 'top-right'
  22. },
  23. position: {
  24. type: String,
  25. default: 'center'
  26. },
  27. overlay: {
  28. type: Boolean,
  29. default: true
  30. },
  31. closeOnClickOverlay: {
  32. type: Boolean,
  33. default: true
  34. }
  35. },
  36. beforeCreate: function beforeCreate() {
  37. var _this = this;
  38. var createEmitter = function createEmitter(eventName) {
  39. return function (event) {
  40. return _this.$emit(eventName, event);
  41. };
  42. };
  43. this.onClick = createEmitter('click');
  44. this.onOpened = createEmitter('opened');
  45. this.onClosed = createEmitter('closed');
  46. },
  47. methods: {
  48. onClickCloseIcon: function onClickCloseIcon(event) {
  49. this.$emit('click-close-icon', event);
  50. this.close();
  51. }
  52. },
  53. render: function render() {
  54. var _bem;
  55. var h = arguments[0];
  56. if (!this.shouldRender) {
  57. return;
  58. }
  59. var round = this.round,
  60. position = this.position,
  61. duration = this.duration;
  62. var isCenter = position === 'center';
  63. var transitionName = this.transition || (isCenter ? 'van-fade' : "van-popup-slide-" + position);
  64. var style = {};
  65. if (isDef(duration)) {
  66. var key = isCenter ? 'animationDuration' : 'transitionDuration';
  67. style[key] = duration + "s";
  68. }
  69. return h("transition", {
  70. "attrs": {
  71. "appear": this.transitionAppear,
  72. "name": transitionName
  73. },
  74. "on": {
  75. "afterEnter": this.onOpened,
  76. "afterLeave": this.onClosed
  77. }
  78. }, [h("div", {
  79. "directives": [{
  80. name: "show",
  81. value: this.value
  82. }],
  83. "style": style,
  84. "class": bem((_bem = {
  85. round: round
  86. }, _bem[position] = position, _bem['safe-area-inset-bottom'] = this.safeAreaInsetBottom, _bem)),
  87. "on": {
  88. "click": this.onClick
  89. }
  90. }, [this.slots(), this.closeable && h(Icon, {
  91. "attrs": {
  92. "role": "button",
  93. "tabindex": "0",
  94. "name": this.closeIcon
  95. },
  96. "class": bem('close-icon', this.closeIconPosition),
  97. "on": {
  98. "click": this.onClickCloseIcon
  99. }
  100. })])]);
  101. }
  102. });