index.vue 6.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <template>
  2. <uni-shadow-root class="vant-dist-popup-index"><van-overlay v-if="overlay" :show="show" :z-index="zIndex" :custom-style="overlayStyle" :duration="duration" @click="onClickOverlay" :lock-scroll="lockScroll"></van-overlay>
  3. <view v-if="inited" :class="'custom-class '+(classes)+' '+(utils.bem('popup', [position, { round, safe: safeAreaInsetBottom, safeTop: safeAreaInsetTop }]))" :style="computed.popupStyle({ zIndex, currentDuration, display, customStyle })" @transitionend="onTransitionEnd">
  4. <slot></slot>
  5. <van-icon v-if="closeable" :name="closeIcon" :class="'close-icon-class van-popup__close-icon van-popup__close-icon--'+(closeIconPosition)" @click.native="onClickCloseIcon"></van-icon>
  6. </view></uni-shadow-root>
  7. </template>
  8. <wxs src="../wxs/utils.wxs" module="utils"></wxs><wxs src="./index.wxs" module="computed"></wxs>
  9. <script>
  10. import VanIcon from '../icon/index.vue'
  11. import VanOverlay from '../overlay/index.vue'
  12. global['__wxVueOptions'] = {components:{'van-icon': VanIcon,'van-overlay': VanOverlay}}
  13. global['__wxRoute'] = 'vant/dist/popup/index'
  14. import { VantComponent } from '../common/component';
  15. import { transition } from '../mixins/transition';
  16. VantComponent({
  17. classes: [
  18. 'enter-class',
  19. 'enter-active-class',
  20. 'enter-to-class',
  21. 'leave-class',
  22. 'leave-active-class',
  23. 'leave-to-class',
  24. 'close-icon-class',
  25. ],
  26. mixins: [transition(false)],
  27. props: {
  28. round: Boolean,
  29. closeable: Boolean,
  30. customStyle: String,
  31. overlayStyle: String,
  32. transition: {
  33. type: String,
  34. observer: 'observeClass',
  35. },
  36. zIndex: {
  37. type: Number,
  38. value: 100,
  39. },
  40. overlay: {
  41. type: Boolean,
  42. value: true,
  43. },
  44. closeIcon: {
  45. type: String,
  46. value: 'cross',
  47. },
  48. closeIconPosition: {
  49. type: String,
  50. value: 'top-right',
  51. },
  52. closeOnClickOverlay: {
  53. type: Boolean,
  54. value: true,
  55. },
  56. position: {
  57. type: String,
  58. value: 'center',
  59. observer: 'observeClass',
  60. },
  61. safeAreaInsetBottom: {
  62. type: Boolean,
  63. value: true,
  64. },
  65. safeAreaInsetTop: {
  66. type: Boolean,
  67. value: false,
  68. },
  69. lockScroll: {
  70. type: Boolean,
  71. value: true,
  72. },
  73. },
  74. created() {
  75. this.observeClass();
  76. },
  77. methods: {
  78. onClickCloseIcon() {
  79. this.$emit('close');
  80. },
  81. onClickOverlay() {
  82. this.$emit('click-overlay');
  83. if (this.data.closeOnClickOverlay) {
  84. this.$emit('close');
  85. }
  86. },
  87. observeClass() {
  88. const { transition, position, duration } = this.data;
  89. const updateData = {
  90. name: transition || position,
  91. };
  92. if (transition === 'none') {
  93. updateData.duration = 0;
  94. this.originDuration = duration;
  95. }
  96. else if (this.originDuration != null) {
  97. updateData.duration = this.originDuration;
  98. }
  99. this.setData(updateData);
  100. },
  101. },
  102. });
  103. export default global['__wxComponents']['vant/dist/popup/index']
  104. </script>
  105. <style platform="mp-weixin">
  106. @import '../common/index.css';.van-popup{position:fixed;box-sizing:border-box;max-height:100%;overflow-y:auto;transition-timing-function:ease;animation:ease both;-webkit-overflow-scrolling:touch;background-color:#fff;background-color:var(--popup-background-color,#fff)}.van-popup--center{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.van-popup--center.van-popup--round{border-radius:16px;border-radius:var(--popup-round-border-radius,16px)}.van-popup--top{top:0;left:0;width:100%}.van-popup--top.van-popup--round{border-radius:0 0 16px 16px;border-radius:0 0 var(--popup-round-border-radius,16px) var(--popup-round-border-radius,16px)}.van-popup--right{top:50%;right:0;transform:translate3d(0,-50%,0)}.van-popup--right.van-popup--round{border-radius:16px 0 0 16px;border-radius:var(--popup-round-border-radius,16px) 0 0 var(--popup-round-border-radius,16px)}.van-popup--bottom{bottom:0;left:0;width:100%}.van-popup--bottom.van-popup--round{border-radius:16px 16px 0 0;border-radius:var(--popup-round-border-radius,16px) var(--popup-round-border-radius,16px) 0 0}.van-popup--left{top:50%;left:0;transform:translate3d(0,-50%,0)}.van-popup--left.van-popup--round{border-radius:0 16px 16px 0;border-radius:0 var(--popup-round-border-radius,16px) var(--popup-round-border-radius,16px) 0}.van-popup--bottom.van-popup--safe{padding-bottom:env(safe-area-inset-bottom)}.van-popup--safeTop{padding-top:env(safe-area-inset-top)}.van-popup__close-icon{position:absolute;z-index:1;z-index:var(--popup-close-icon-z-index,1);color:#969799;color:var(--popup-close-icon-color,#969799);font-size:18px;font-size:var(--popup-close-icon-size,18px)}.van-popup__close-icon--top-left{top:16px;top:var(--popup-close-icon-margin,16px);left:16px;left:var(--popup-close-icon-margin,16px)}.van-popup__close-icon--top-right{top:16px;top:var(--popup-close-icon-margin,16px);right:16px;right:var(--popup-close-icon-margin,16px)}.van-popup__close-icon--bottom-left{bottom:16px;bottom:var(--popup-close-icon-margin,16px);left:16px;left:var(--popup-close-icon-margin,16px)}.van-popup__close-icon--bottom-right{right:16px;right:var(--popup-close-icon-margin,16px);bottom:16px;bottom:var(--popup-close-icon-margin,16px)}.van-popup__close-icon:active{opacity:.6}.van-scale-enter-active,.van-scale-leave-active{transition-property:opacity,transform}.van-scale-enter,.van-scale-leave-to{transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-fade-enter-active,.van-fade-leave-active{transition-property:opacity}.van-fade-enter,.van-fade-leave-to{opacity:0}.van-center-enter-active,.van-center-leave-active{transition-property:opacity}.van-center-enter,.van-center-leave-to{opacity:0}.van-bottom-enter-active,.van-bottom-leave-active,.van-left-enter-active,.van-left-leave-active,.van-right-enter-active,.van-right-leave-active,.van-top-enter-active,.van-top-leave-active{transition-property:transform}.van-bottom-enter,.van-bottom-leave-to{transform:translate3d(0,100%,0)}.van-top-enter,.van-top-leave-to{transform:translate3d(0,-100%,0)}.van-left-enter,.van-left-leave-to{transform:translate3d(-100%,-50%,0)}.van-right-enter,.van-right-leave-to{transform:translate3d(100%,-50%,0)}
  107. </style>