江西小程序管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

304 lines
8.4 KiB

1 year ago
  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>