uni-popup.vue 5.8 KB

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