bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-popup/u-popup.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,304 @@
<template>
   <view class="u-popup">
      <u-overlay
         :show="show"
         @click="overlayClick"
         v-if="overlay"
         :duration="overlayDuration"
         :customStyle="overlayStyle"
         :opacity="overlayOpacity"
      ></u-overlay>
      <u-transition
         :show="show"
         :customStyle="transitionStyle"
         :mode="position"
         :duration="duration"
         @afterEnter="afterEnter"
         @click="clickHandler"
      >
         <view
            class="u-popup__content"
            :style="[contentStyle]"
            @tap.stop="noop"
         >
            <u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
            <slot></slot>
            <view
               v-if="closeable"
               @tap.stop="close"
               class="u-popup__content__close"
               :class="['u-popup__content__close--' + closeIconPos]"
               hover-class="u-popup__content__close--hover"
               hover-stay-time="150"
            >
               <u-icon
                  name="close"
                  color="#909399"
                  size="18"
                  bold
               ></u-icon>
            </view>
            <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
         </view>
      </u-transition>
   </view>
</template>

<script>
   import props from './props.js';

   /**
    * popup å¼¹çª—
    * @description å¼¹å‡ºå±‚容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
    * @tutorial https://www.uviewui.com/components/popup.html
    * @property {Boolean}         show            æ˜¯å¦å±•ç¤ºå¼¹çª— (默认 false )
    * @property {Boolean}         overlay            æ˜¯å¦æ˜¾ç¤ºé®ç½© ï¼ˆé»˜è®¤ true ï¼‰
    * @property {String}         mode            å¼¹å‡ºæ–¹å‘（默认 'bottom' ï¼‰
    * @property {String | Number}   duration         åŠ¨ç”»æ—¶é•¿ï¼Œå•ä½ms ï¼ˆé»˜è®¤ 300 ï¼‰
    * @property {String | Number}   overlayDuration         é®ç½©å±‚动画时长，单位ms ï¼ˆé»˜è®¤ 350 ï¼‰
    * @property {Boolean}         closeable         æ˜¯å¦æ˜¾ç¤ºå…³é—­å›¾æ ‡ï¼ˆé»˜è®¤ false ï¼‰
    * @property {Object | String}   overlayStyle      è‡ªå®šä¹‰é®ç½©çš„样式
    * @property {String | Number}   overlayOpacity      é®ç½©é€æ˜Žåº¦ï¼Œ0-1之间（默认 0.5）
    * @property {Boolean}         closeOnClickOverlay   ç‚¹å‡»é®ç½©æ˜¯å¦å…³é—­å¼¹çª— ï¼ˆé»˜è®¤  true ï¼‰
    * @property {String | Number}   zIndex            å±‚级 ï¼ˆé»˜è®¤ 10075 ï¼‰
    * @property {Boolean}         safeAreaInsetBottom   æ˜¯å¦ä¸ºiPhoneX留出底部安全距离 ï¼ˆé»˜è®¤ true ï¼‰
    * @property {Boolean}         safeAreaInsetTop   æ˜¯å¦ç•™å‡ºé¡¶éƒ¨å®‰å…¨è·ç¦»ï¼ˆçŠ¶æ€æ é«˜åº¦ï¼‰ ï¼ˆé»˜è®¤ false ï¼‰
    * @property {String}         closeIconPos      è‡ªå®šä¹‰å…³é—­å›¾æ ‡ä½ç½®ï¼ˆé»˜è®¤ 'top-right' ï¼‰
    * @property {String | Number}   round            åœ†è§’值（默认 0）
    * @property {Boolean}         zoom            å½“mode=center时 æ˜¯å¦å¼€å¯ç¼©æ”¾ï¼ˆé»˜è®¤ true ï¼‰
    * @property {Object}         customStyle         ç»„件的样式，对象形式
    * @event {Function} open å¼¹å‡ºå±‚打开
    * @event {Function} close å¼¹å‡ºå±‚收起
    * @example <u-popup v-model="show"><text>出淤泥而不染，濯清涟而不妖</text></u-popup>
    */
   export default {
      name: 'u-popup',
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      data() {
         return {
            overlayDuration: this.duration + 50
         }
      },
      watch: {
         show(newValue, oldValue) {
            if (newValue === true) {
               // #ifdef MP-WEIXIN
               const children = this.$children
               this.retryComputedComponentRect(children)
               // #endif
            }
         }
      },
      computed: {
         transitionStyle() {
            const style = {
               zIndex: this.zIndex,
               position: 'fixed',
               display: 'flex',
            }
            style[this.mode] = 0
            if (this.mode === 'left') {
               return uni.$u.deepMerge(style, {
                  bottom: 0,
                  top: 0,
               })
            } else if (this.mode === 'right') {
               return uni.$u.deepMerge(style, {
                  bottom: 0,
                  top: 0,
               })
            } else if (this.mode === 'top') {
               return uni.$u.deepMerge(style, {
                  left: 0,
                  right: 0
               })
            } else if (this.mode === 'bottom') {
               return uni.$u.deepMerge(style, {
                  left: 0,
                  right: 0,
               })
            } else if (this.mode === 'center') {
               return uni.$u.deepMerge(style, {
                  alignItems: 'center',
                  'justify-content': 'center',
                  top: 0,
                  left: 0,
                  right: 0,
                  bottom: 0
               })
            }
         },
         contentStyle() {
            const style = {}
            // é€šè¿‡è®¾å¤‡ä¿¡æ¯çš„safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
            // ä¸ä½¿ç”¨css方案，是因为nvue不支持css的iPhoneX安全区查询属性
            const {
               safeAreaInsets
            } = uni.$u.sys()
            if (this.mode !== 'center') {
               style.flex = 1
            }
            // èƒŒæ™¯è‰²ï¼Œä¸€èˆ¬ç”¨äºŽè®¾ç½®ä¸ºtransparent，去除默认的白色背景
            if (this.bgColor) {
               style.backgroundColor = this.bgColor
            }
            if(this.round) {
               const value = uni.$u.addUnit(this.round)
               if(this.mode === 'top') {
                  style.borderBottomLeftRadius = value
                  style.borderBottomRightRadius = value
               } else if(this.mode === 'bottom') {
                  style.borderTopLeftRadius = value
                  style.borderTopRightRadius = value
               } else if(this.mode === 'center') {
                  style.borderRadius = value
               } 
            }
            return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
         },
         position() {
            if (this.mode === 'center') {
               return this.zoom ? 'fade-zoom' : 'fade'
            }
            if (this.mode === 'left') {
               return 'slide-left'
            }
            if (this.mode === 'right') {
               return 'slide-right'
            }
            if (this.mode === 'bottom') {
               return 'slide-up'
            }
            if (this.mode === 'top') {
               return 'slide-down'
            }
         },
      },
      methods: {
         // ç‚¹å‡»é®ç½©
         overlayClick() {
            if (this.closeOnClickOverlay) {
               this.$emit('close')
            }
         },
         close(e) {
            this.$emit('close')
         },
         afterEnter() {
            this.$emit('open')
         },
         clickHandler() {
            // ç”±äºŽä¸­éƒ¨å¼¹å‡ºæ—¶ï¼Œå…¶u-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
            if(this.mode === 'center') {
               this.overlayClick()
            }
            this.$emit('click')
         },
         // #ifdef MP-WEIXIN
         retryComputedComponentRect(children) {
            // ç»„件内部需要计算节点的组件
            const names = ['u-calendar-month', 'u-album', 'u-collapse-item', 'u-dropdown', 'u-index-item', 'u-index-list',
               'u-line-progress', 'u-list-item', 'u-rate', 'u-read-more', 'u-row', 'u-row-notice', 'u-scroll-list',
               'u-skeleton', 'u-slider', 'u-steps-item', 'u-sticky', 'u-subsection', 'u-swipe-action-item', 'u-tabbar',
               'u-tabs', 'u-tooltip'
            ]
            // åŽ†éæ‰€æœ‰çš„子组件节点
            for (let i = 0; i < children.length; i++) {
               const child = children[i]
               // æ‹¿åˆ°å­ç»„件的子组件
               const grandChild = child.$children
               // åˆ¤æ–­å¦‚果在需要重新初始化的组件数组中名中，并且存在init方法的话，则执行
               if (names.includes(child.$options.name) && typeof child?.init === 'function') {
                  // éœ€è¦è¿›è¡Œä¸€å®šçš„延时，因为初始化页面需要时间
                  uni.$u.sleep(50).then(() => {
                     child.init()
                  })
               }
               // å¦‚果子组件还有孙组件，进行递归历遍
               if (grandChild.length) {
                  this.retryComputedComponentRect(grandChild)
               }
            }
         }
         // #endif
      }
   }
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";
   $u-popup-flex:1 !default;
   $u-popup-content-background-color: #fff !default;

   .u-popup {
      flex: $u-popup-flex;

      &__content {
         background-color: $u-popup-content-background-color;
         position: relative;

         &--round-top {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
         }

         &--round-left {
            border-top-left-radius: 0;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 10px;
         }

         &--round-right {
            border-top-left-radius: 10px;
            border-top-right-radius: 0;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 0;
         }

         &--round-bottom {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
         }

         &--round-center {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
         }

         &__close {
            position: absolute;

            &--hover {
               opacity: 0.4;
            }
         }

         &__close--top-left {
            top: 15px;
            left: 15px;
         }

         &__close--top-right {
            top: 15px;
            right: 15px;
         }

         &__close--bottom-left {
            bottom: 15px;
            left: 15px;
         }

         &__close--bottom-right {
            right: 15px;
            bottom: 15px;
         }
      }
   }
</style>