uni-popup.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. <template>
  2. <view v-if="showPopupState" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear">
  3. <uni-transition v-if="maskShow" :mode-class="['fade']" :styles="maskClass" :maskBackgroundColor="maskBackgroundColor" :duration="duration" :show="showTrans"
  4. @click="onTap" />
  5. <uni-transition :mode-class="ani" :styles="transClass" maskBackgroundColor="rgba(,0,0,0,0)" :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.vue'
  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. maskBackgroundColor: {
  52. type: String,
  53. default: 'rgba(0, 0, 0, .5)'
  54. }
  55. },
  56. provide() {
  57. return {
  58. popup: this
  59. }
  60. },
  61. watch: {
  62. /**
  63. * 监听type类型
  64. */
  65. type: {
  66. handler: function(newVal) {
  67. this[this.config[newVal]]()
  68. },
  69. immediate: true
  70. },
  71. /**
  72. * 监听遮罩是否可点击
  73. * @param {Object} val
  74. */
  75. maskClick(val) {
  76. this.mkclick = val
  77. }
  78. },
  79. data() {
  80. return {
  81. duration: 300,
  82. ani: [],
  83. showPopupState: false,
  84. showTrans: false,
  85. maskClass: {
  86. 'position': 'fixed',
  87. 'bottom': 0,
  88. 'top': 0,
  89. 'left': 0,
  90. 'right': 0
  91. },
  92. transClass: {
  93. 'position': 'fixed',
  94. 'left': 0,
  95. 'right': 0,
  96. },
  97. maskShow: true,
  98. mkclick: true,
  99. popupstyle: 'top',
  100. config: {
  101. top:'top',
  102. // 底部弹出
  103. bottom:'bottom',
  104. // 居中弹出
  105. center:'center'
  106. }
  107. }
  108. },
  109. created() {
  110. this.mkclick = this.maskClick
  111. if (this.animation) {
  112. this.duration = 300
  113. } else {
  114. this.duration = 0
  115. }
  116. },
  117. methods: {
  118. clear(e) {
  119. // TODO nvue 取消冒泡
  120. e.stopPropagation()
  121. },
  122. open() {
  123. this.showPopupState = true
  124. this.$nextTick(() => {
  125. new Promise(resolve => {
  126. clearTimeout(this.timer)
  127. this.timer = setTimeout(() => {
  128. this.showTrans = true
  129. // fixed by mehaotian 兼容 app 端
  130. this.$nextTick(() => {
  131. resolve();
  132. })
  133. }, 50);
  134. }).then(res => {
  135. // 自定义打开事件
  136. clearTimeout(this.msgtimer)
  137. this.msgtimer = setTimeout(() => {
  138. this.customOpen && this.customOpen()
  139. }, 100)
  140. this.$emit('change', {
  141. show: true,
  142. type: this.type
  143. })
  144. })
  145. })
  146. },
  147. close(type) {
  148. this.showTrans = false
  149. this.$nextTick(() => {
  150. this.$emit('change', {
  151. show: false,
  152. type: this.type
  153. })
  154. clearTimeout(this.timer)
  155. // 自定义关闭事件
  156. this.customOpen && this.customClose()
  157. this.timer = setTimeout(() => {
  158. this.showPopupState = false
  159. }, 300)
  160. })
  161. },
  162. onTap() {
  163. if (!this.mkclick) return
  164. this.close()
  165. },
  166. /**
  167. * 顶部弹出样式处理
  168. */
  169. top() {
  170. this.popupstyle = 'top'
  171. this.ani = ['slide-top']
  172. this.transClass = {
  173. 'position': 'fixed',
  174. 'left': 0,
  175. 'right': 0,
  176. }
  177. },
  178. /**
  179. * 底部弹出样式处理
  180. */
  181. bottom() {
  182. this.popupstyle = 'bottom'
  183. this.ani = ['slide-bottom']
  184. this.transClass = {
  185. 'position': 'fixed',
  186. 'left': 0,
  187. 'right': 0,
  188. 'bottom': 0
  189. }
  190. },
  191. /**
  192. * 中间弹出样式处理
  193. */
  194. center() {
  195. this.popupstyle = 'center'
  196. this.ani = ['zoom-out', 'fade']
  197. this.transClass = {
  198. 'position': 'fixed',
  199. /* #ifndef APP-NVUE */
  200. 'display': 'flex',
  201. 'flexDirection': 'column',
  202. /* #endif */
  203. 'bottom': 0,
  204. 'left': 0,
  205. 'right': 0,
  206. 'top': 0,
  207. 'justifyContent': 'center',
  208. 'alignItems': 'center'
  209. }
  210. }
  211. }
  212. }
  213. </script>
  214. <style lang="scss" scoped>
  215. .uni-popup {
  216. position: fixed;
  217. /* #ifndef APP-NVUE */
  218. z-index: 99;
  219. /* #endif */
  220. }
  221. .uni-popup__mask {
  222. position: absolute;
  223. top: 0;
  224. bottom: 0;
  225. left: 0;
  226. right: 0;
  227. background-color: $uni-bg-color-mask;
  228. opacity: 0;
  229. }
  230. .mask-ani {
  231. transition-property: opacity;
  232. transition-duration: 0.2s;
  233. }
  234. .uni-top-mask {
  235. opacity: 1;
  236. }
  237. .uni-bottom-mask {
  238. opacity: 1;
  239. }
  240. .uni-center-mask {
  241. opacity: 1;
  242. }
  243. .uni-popup__wrapper {
  244. /* #ifndef APP-NVUE */
  245. display: block;
  246. /* #endif */
  247. position: absolute;
  248. }
  249. .top {
  250. /* #ifdef H5 */
  251. top: var(--window-top);
  252. /* #endif */
  253. /* #ifndef H5 */
  254. top: 0;
  255. /* #endif */
  256. }
  257. .bottom {
  258. bottom: 0;
  259. }
  260. .uni-popup__wrapper-box {
  261. /* #ifndef APP-NVUE */
  262. display: block;
  263. /* #endif */
  264. position: relative;
  265. /* iphonex 等安全区设置,底部安全区适配 */
  266. /* #ifndef APP-NVUE */
  267. padding-bottom: constant(safe-area-inset-bottom);
  268. padding-bottom: env(safe-area-inset-bottom);
  269. /* #endif */
  270. }
  271. .content-ani {
  272. // transition: transform 0.3s;
  273. transition-property: transform, opacity;
  274. transition-duration: 0.2s;
  275. }
  276. .uni-top-content {
  277. transform: translateY(0);
  278. }
  279. .uni-bottom-content {
  280. transform: translateY(0);
  281. }
  282. .uni-center-content {
  283. transform: scale(1);
  284. opacity: 1;
  285. }
  286. </style>