index.vue 6.7 KB

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