uni-popup.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. <template>
  2. <view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
  3. <uni-transition :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans"
  4. @click="onTap" />
  5. <uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
  6. <view class="uni-popup__wrapper-box" @click.stop="clear">
  7. <slot />
  8. </view>
  9. </uni-transition>
  10. </view>
  11. </template>
  12. <script>
  13. import uniTransition from '../uni-transition/uni-transition-a.vue'
  14. import popup from './popup.js'
  15. /**
  16. * PopUp 弹出层
  17. * @description 弹出层组件,为了解决遮罩弹层的问题
  18. * @tutorial https://ext.dcloud.net.cn/plugin?id=329
  19. * @property {String} type = [top|center|bottom] 弹出方式
  20. * @value top 顶部弹出
  21. * @value center 中间弹出
  22. * @value bottom 底部弹出
  23. * @property {Boolean} animation = [ture|false] 是否开启动画
  24. * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
  25. * @event {Function} change 打开关闭弹窗触发,e={show: false}
  26. */
  27. export default {
  28. name: 'UniPopup',
  29. components: {
  30. uniTransition
  31. },
  32. props: {
  33. // 开启动画
  34. animation: {
  35. type: Boolean,
  36. default: true
  37. },
  38. // 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层
  39. type: {
  40. type: String,
  41. default: 'center'
  42. },
  43. // maskClick
  44. maskClick: {
  45. type: Boolean,
  46. default: true
  47. }
  48. },
  49. data() {
  50. return {
  51. duration: 300,
  52. ani: [],
  53. showPopup: false,
  54. showTrans: false,
  55. maskClass: {
  56. 'position': 'fixed',
  57. 'bottom': 0,
  58. 'top': 0,
  59. 'left': 0,
  60. 'right': 0,
  61. 'backgroundColor': 'rgba(0, 0, 0, 0.4)'
  62. },
  63. transClass: {
  64. 'position': 'fixed',
  65. 'left': 0,
  66. 'right': 0,
  67. }
  68. }
  69. },
  70. watch: {
  71. type: {
  72. handler: function(newVal) {
  73. switch (this.type) {
  74. case 'top':
  75. this.ani = ['slide-top']
  76. this.transClass = {
  77. 'position': 'fixed',
  78. 'left': 0,
  79. 'right': 0,
  80. }
  81. break
  82. case 'bottom':
  83. this.ani = ['slide-bottom']
  84. this.transClass = {
  85. 'position': 'fixed',
  86. 'left': 0,
  87. 'right': 0,
  88. 'bottom': 0
  89. }
  90. break
  91. case 'center':
  92. this.ani = ['zoom-out', 'fade']
  93. this.transClass = {
  94. 'position': 'fixed',
  95. /* #ifndef APP-NVUE */
  96. 'display': 'flex',
  97. 'flexDirection': 'column',
  98. /* #endif */
  99. 'bottom': 0,
  100. 'left': 0,
  101. 'right': 0,
  102. 'top': 0,
  103. 'justifyContent': 'center',
  104. 'alignItems': 'center'
  105. }
  106. break
  107. }
  108. },
  109. immediate: true
  110. }
  111. },
  112. created() {
  113. if (this.animation) {
  114. this.duration = 300
  115. } else {
  116. this.duration = 0
  117. }
  118. },
  119. provide() {
  120. return {
  121. popup: this
  122. }
  123. },
  124. mixins: [popup],
  125. methods: {
  126. clear(e) {
  127. // TODO nvue 取消冒泡
  128. e.stopPropagation()
  129. },
  130. open() {
  131. this.showPopup = true
  132. this.$nextTick(() => {
  133. new Promise(resolve => {
  134. clearTimeout(this.timer)
  135. this.timer = setTimeout(() => {
  136. this.showTrans = true
  137. // fixed by mehaotian 兼容 app 端
  138. this.$nextTick(() => {
  139. resolve();
  140. })
  141. }, 50);
  142. }).then(res => {
  143. // 自定义打开事件
  144. clearTimeout(this.msgtimer)
  145. this.msgtimer = setTimeout(() => {
  146. this.customOpen && this.customOpen()
  147. }, 100)
  148. this.$emit('change', {
  149. show: true,
  150. type: this.type
  151. })
  152. })
  153. })
  154. },
  155. // open() {
  156. // this.showPopup = true
  157. // this.$nextTick(() => {
  158. // clearTimeout(this.timer)
  159. // this.timer = setTimeout(() => {
  160. // this.showTrans = true
  161. // }, 50);
  162. // })
  163. // this.$emit('change', {
  164. // show: true
  165. // })
  166. // },
  167. close(type) {
  168. this.showTrans = false
  169. this.$nextTick(() => {
  170. clearTimeout(this.timer)
  171. this.timer = setTimeout(() => {
  172. this.$emit('change', {
  173. show: false
  174. })
  175. this.showPopup = false
  176. }, 300)
  177. })
  178. },
  179. onTap() {
  180. if (!this.maskClick) return
  181. this.close()
  182. }
  183. }
  184. }
  185. </script>
  186. <style scoped>
  187. .uni-popup {
  188. position: fixed;
  189. /* #ifdef H5 */
  190. top: var(--window-top);
  191. /* #endif */
  192. /* #ifndef H5 */
  193. top: 0;
  194. /* #endif */
  195. bottom: 0;
  196. left: 0;
  197. right: 0;
  198. /* #ifndef APP-NVUE */
  199. z-index: 99;
  200. /* #endif */
  201. }
  202. .uni-popup__mask {
  203. position: absolute;
  204. top: 0;
  205. bottom: 0;
  206. left: 0;
  207. right: 0;
  208. background-color: rgba(0, 0, 0, 0.4);
  209. opacity: 0;
  210. }
  211. .mask-ani {
  212. transition-property: opacity;
  213. transition-duration: 0.2s;
  214. }
  215. .uni-top-mask {
  216. opacity: 1;
  217. }
  218. .uni-bottom-mask {
  219. opacity: 1;
  220. }
  221. .uni-center-mask {
  222. opacity: 1;
  223. }
  224. .uni-popup__wrapper {
  225. /* #ifndef APP-NVUE */
  226. display: block;
  227. /* #endif */
  228. position: absolute;
  229. }
  230. .top {
  231. top: 0;
  232. left: 0;
  233. right: 0;
  234. transform: translateY(-500px);
  235. }
  236. .bottom {
  237. bottom: 0;
  238. left: 0;
  239. right: 0;
  240. transform: translateY(500px);
  241. }
  242. .center {
  243. /* #ifndef APP-NVUE */
  244. display: flex;
  245. flex-direction: column;
  246. /* #endif */
  247. bottom: 0;
  248. left: 0;
  249. right: 0;
  250. top: 0;
  251. justify-content: center;
  252. align-items: center;
  253. transform: scale(1.2);
  254. opacity: 0;
  255. }
  256. .uni-popup__wrapper-box {
  257. /* #ifndef APP-NVUE */
  258. display: block;
  259. /* #endif */
  260. position: relative;
  261. }
  262. .content-ani {
  263. /* transition: transform 0.3s;
  264. */
  265. transition-property: transform, opacity;
  266. transition-duration: 0.2s;
  267. }
  268. .uni-top-content {
  269. transform: translateY(0);
  270. }
  271. .uni-bottom-content {
  272. transform: translateY(0);
  273. }
  274. .uni-center-content {
  275. transform: scale(1);
  276. opacity: 1;
  277. }
  278. </style>