u-popup.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
  1. <template>
  2. <view class="u-popup">
  3. <u-overlay
  4. :show="show"
  5. @click="overlayClick"
  6. v-if="overlay"
  7. :duration="overlayDuration"
  8. :customStyle="overlayStyle"
  9. :opacity="overlayOpacity"
  10. ></u-overlay>
  11. <u-transition
  12. :show="show"
  13. :customStyle="transitionStyle"
  14. :mode="position"
  15. :duration="duration"
  16. @afterEnter="afterEnter"
  17. @click="clickHandler"
  18. >
  19. <view
  20. class="u-popup__content"
  21. :style="[contentStyle]"
  22. @tap.stop="noop"
  23. >
  24. <u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
  25. <slot></slot>
  26. <view
  27. v-if="closeable"
  28. @tap.stop="close"
  29. class="u-popup__content__close"
  30. :class="['u-popup__content__close--' + closeIconPos]"
  31. hover-class="u-popup__content__close--hover"
  32. hover-stay-time="150"
  33. >
  34. <u-icon
  35. name="close"
  36. color="#909399"
  37. size="18"
  38. bold
  39. ></u-icon>
  40. </view>
  41. <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
  42. </view>
  43. </u-transition>
  44. </view>
  45. </template>
  46. <script>
  47. import props from './props.js';
  48. /**
  49. * popup 弹窗
  50. * @description 弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义
  51. * @tutorial https://www.uviewui.com/components/popup.html
  52. * @property {Boolean} show 是否展示弹窗 (默认 false )
  53. * @property {Boolean} overlay 是否显示遮罩 (默认 true )
  54. * @property {String} mode 弹出方向(默认 'bottom' )
  55. * @property {String | Number} duration 动画时长,单位ms (默认 300 )
  56. * @property {String | Number} overlayDuration 遮罩层动画时长,单位ms (默认 350 )
  57. * @property {Boolean} closeable 是否显示关闭图标(默认 false )
  58. * @property {Object | String} overlayStyle 自定义遮罩的样式
  59. * @property {String | Number} overlayOpacity 遮罩透明度,0-1之间(默认 0.5)
  60. * @property {Boolean} closeOnClickOverlay 点击遮罩是否关闭弹窗 (默认 true )
  61. * @property {String | Number} zIndex 层级 (默认 10075 )
  62. * @property {Boolean} safeAreaInsetBottom 是否为iPhoneX留出底部安全距离 (默认 true )
  63. * @property {Boolean} safeAreaInsetTop 是否留出顶部安全距离(状态栏高度) (默认 false )
  64. * @property {String} closeIconPos 自定义关闭图标位置(默认 'top-right' )
  65. * @property {String | Number} round 圆角值(默认 0)
  66. * @property {Boolean} zoom 当mode=center时 是否开启缩放(默认 true )
  67. * @property {Object} customStyle 组件的样式,对象形式
  68. * @event {Function} open 弹出层打开
  69. * @event {Function} close 弹出层收起
  70. * @example <u-popup v-model="show"><text>出淤泥而不染,濯清涟而不妖</text></u-popup>
  71. */
  72. export default {
  73. name: 'u-popup',
  74. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  75. data() {
  76. return {
  77. overlayDuration: this.duration + 50
  78. }
  79. },
  80. watch: {
  81. show(newValue, oldValue) {
  82. if (newValue === true) {
  83. // #ifdef MP-WEIXIN
  84. const children = this.$children
  85. this.retryComputedComponentRect(children)
  86. // #endif
  87. }
  88. }
  89. },
  90. computed: {
  91. transitionStyle() {
  92. const style = {
  93. zIndex: this.zIndex,
  94. position: 'fixed',
  95. display: 'flex',
  96. }
  97. style[this.mode] = 0
  98. if (this.mode === 'left') {
  99. return uni.$u.deepMerge(style, {
  100. bottom: 0,
  101. top: 0,
  102. })
  103. } else if (this.mode === 'right') {
  104. return uni.$u.deepMerge(style, {
  105. bottom: 0,
  106. top: 0,
  107. })
  108. } else if (this.mode === 'top') {
  109. return uni.$u.deepMerge(style, {
  110. left: 0,
  111. right: 0
  112. })
  113. } else if (this.mode === 'bottom') {
  114. return uni.$u.deepMerge(style, {
  115. left: 0,
  116. right: 0,
  117. })
  118. } else if (this.mode === 'center') {
  119. return uni.$u.deepMerge(style, {
  120. alignItems: 'center',
  121. 'justify-content': 'center',
  122. top: 0,
  123. left: 0,
  124. right: 0,
  125. bottom: 0
  126. })
  127. }
  128. },
  129. contentStyle() {
  130. const style = {}
  131. // 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
  132. // 不使用css方案,是因为nvue不支持css的iPhoneX安全区查询属性
  133. const {
  134. safeAreaInsets
  135. } = uni.$u.sys()
  136. if (this.mode !== 'center') {
  137. style.flex = 1
  138. }
  139. // 背景色,一般用于设置为transparent,去除默认的白色背景
  140. if (this.bgColor) {
  141. style.backgroundColor = this.bgColor
  142. }
  143. if(this.round) {
  144. const value = uni.$u.addUnit(this.round)
  145. if(this.mode === 'top') {
  146. style.borderBottomLeftRadius = value
  147. style.borderBottomRightRadius = value
  148. } else if(this.mode === 'bottom') {
  149. style.borderTopLeftRadius = value
  150. style.borderTopRightRadius = value
  151. } else if(this.mode === 'center') {
  152. style.borderRadius = value
  153. }
  154. }
  155. return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
  156. },
  157. position() {
  158. if (this.mode === 'center') {
  159. return this.zoom ? 'fade-zoom' : 'fade'
  160. }
  161. if (this.mode === 'left') {
  162. return 'slide-left'
  163. }
  164. if (this.mode === 'right') {
  165. return 'slide-right'
  166. }
  167. if (this.mode === 'bottom') {
  168. return 'slide-up'
  169. }
  170. if (this.mode === 'top') {
  171. return 'slide-down'
  172. }
  173. },
  174. },
  175. methods: {
  176. // 点击遮罩
  177. overlayClick() {
  178. if (this.closeOnClickOverlay) {
  179. this.$emit('close')
  180. }
  181. },
  182. close(e) {
  183. this.$emit('close')
  184. },
  185. afterEnter() {
  186. this.$emit('open')
  187. },
  188. clickHandler() {
  189. // 由于中部弹出时,其u-transition占据了整个页面相当于遮罩,此时需要发出遮罩点击事件,是否无法通过点击遮罩关闭弹窗
  190. if(this.mode === 'center') {
  191. this.overlayClick()
  192. }
  193. this.$emit('click')
  194. },
  195. // #ifdef MP-WEIXIN
  196. retryComputedComponentRect(children) {
  197. // 组件内部需要计算节点的组件
  198. const names = ['u-calendar-month', 'u-album', 'u-collapse-item', 'u-dropdown', 'u-index-item', 'u-index-list',
  199. 'u-line-progress', 'u-list-item', 'u-rate', 'u-read-more', 'u-row', 'u-row-notice', 'u-scroll-list',
  200. 'u-skeleton', 'u-slider', 'u-steps-item', 'u-sticky', 'u-subsection', 'u-swipe-action-item', 'u-tabbar',
  201. 'u-tabs', 'u-tooltip'
  202. ]
  203. // 历遍所有的子组件节点
  204. for (let i = 0; i < children.length; i++) {
  205. const child = children[i]
  206. // 拿到子组件的子组件
  207. const grandChild = child.$children
  208. // 判断如果在需要重新初始化的组件数组中名中,并且存在init方法的话,则执行
  209. if (names.includes(child.$options.name) && typeof child?.init === 'function') {
  210. // 需要进行一定的延时,因为初始化页面需要时间
  211. uni.$u.sleep(50).then(() => {
  212. child.init()
  213. })
  214. }
  215. // 如果子组件还有孙组件,进行递归历遍
  216. if (grandChild.length) {
  217. this.retryComputedComponentRect(grandChild)
  218. }
  219. }
  220. }
  221. // #endif
  222. }
  223. }
  224. </script>
  225. <style lang="scss" scoped>
  226. @import "../../libs/css/components.scss";
  227. $u-popup-flex:1 !default;
  228. $u-popup-content-background-color: #fff !default;
  229. .u-popup {
  230. flex: $u-popup-flex;
  231. &__content {
  232. background-color: $u-popup-content-background-color;
  233. position: relative;
  234. &--round-top {
  235. border-top-left-radius: 0;
  236. border-top-right-radius: 0;
  237. border-bottom-left-radius: 10px;
  238. border-bottom-right-radius: 10px;
  239. }
  240. &--round-left {
  241. border-top-left-radius: 0;
  242. border-top-right-radius: 10px;
  243. border-bottom-left-radius: 0;
  244. border-bottom-right-radius: 10px;
  245. }
  246. &--round-right {
  247. border-top-left-radius: 10px;
  248. border-top-right-radius: 0;
  249. border-bottom-left-radius: 10px;
  250. border-bottom-right-radius: 0;
  251. }
  252. &--round-bottom {
  253. border-top-left-radius: 10px;
  254. border-top-right-radius: 10px;
  255. border-bottom-left-radius: 0;
  256. border-bottom-right-radius: 0;
  257. }
  258. &--round-center {
  259. border-top-left-radius: 10px;
  260. border-top-right-radius: 10px;
  261. border-bottom-left-radius: 10px;
  262. border-bottom-right-radius: 10px;
  263. }
  264. &__close {
  265. position: absolute;
  266. &--hover {
  267. opacity: 0.4;
  268. }
  269. }
  270. &__close--top-left {
  271. top: 15px;
  272. left: 15px;
  273. }
  274. &__close--top-right {
  275. top: 15px;
  276. right: 15px;
  277. }
  278. &__close--bottom-left {
  279. bottom: 15px;
  280. left: 15px;
  281. }
  282. &__close--bottom-right {
  283. right: 15px;
  284. bottom: 15px;
  285. }
  286. }
  287. }
  288. </style>