bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,227 @@
<template>
   <u-popup
      mode="center"
      :zoom="zoom"
      :show="show"
      :customStyle="{
         borderRadius: '6px', 
         overflow: 'hidden',
         marginTop: `-${$u.addUnit(negativeTop)}`
      }"
      :closeOnClickOverlay="closeOnClickOverlay"
      :safeAreaInsetBottom="false"
      :duration="400"
      @click="clickHandler"
   >
      <view
         class="u-modal"
         :style="{
            width: $u.addUnit(width),
         }"
      >
         <text
            class="u-modal__title"
            v-if="title"
         >{{ title }}</text>
         <view
            class="u-modal__content"
            :style="{
               paddingTop: `${title ? 12 : 25}px`
            }"
         >
            <slot>
               <text class="u-modal__content__text">{{ content }}</text>
            </slot>
         </view>
         <view
            class="u-modal__button-group--confirm-button"
            v-if="$slots.confirmButton"
         >
            <slot name="confirmButton"></slot>
         </view>
         <template v-else>
            <u-line></u-line>
            <view
               class="u-modal__button-group"
               :style="{
                  flexDirection: buttonReverse ? 'row-reverse' : 'row'
               }"
            >
               <view
                  class="u-modal__button-group__wrapper u-modal__button-group__wrapper--cancel"
                  :hover-stay-time="150"
                  hover-class="u-modal__button-group__wrapper--hover"
                  :class="[showCancelButton && !showConfirmButton && 'u-modal__button-group__wrapper--only-cancel']"
                  v-if="showCancelButton"
                  @tap="cancelHandler"
               >
                  <text
                     class="u-modal__button-group__wrapper__text"
                     :style="{
                        color: cancelColor
                     }"
                  >{{ cancelText }}</text>
               </view>
               <u-line
                  direction="column"
                  v-if="showConfirmButton && showCancelButton"
               ></u-line>
               <view
                  class="u-modal__button-group__wrapper u-modal__button-group__wrapper--confirm"
                  :hover-stay-time="150"
                  hover-class="u-modal__button-group__wrapper--hover"
                  :class="[!showCancelButton && showConfirmButton && 'u-modal__button-group__wrapper--only-confirm']"
                  v-if="showConfirmButton"
                  @tap="confirmHandler"
               >
                  <u-loading-icon v-if="loading"></u-loading-icon>
                  <text
                     v-else
                     class="u-modal__button-group__wrapper__text"
                     :style="{
                        color: confirmColor
                     }"
                  >{{ confirmText }}</text>
               </view>
            </view>
         </template>
      </view>
   </u-popup>
</template>

<script>
   import props from './props.js';
   /**
    * Modal æ¨¡æ€æ¡†
    * @description å¼¹å‡ºæ¨¡æ€æ¡†ï¼Œå¸¸ç”¨äºŽæ¶ˆæ¯æç¤ºã€æ¶ˆæ¯ç¡®è®¤ã€åœ¨å½“前页面内完成特定的交互操作。
    * @tutorial https://www.uviewui.com/components/modul.html
    * @property {Boolean}         show            æ˜¯å¦æ˜¾ç¤ºæ¨¡æ€æ¡†ï¼Œè¯·èµ‹å€¼ç»™show ï¼ˆé»˜è®¤ false ï¼‰
    * @property {String}         title            æ ‡é¢˜å†…容
    * @property {String}         content            æ¨¡æ€æ¡†å†…容，如传入slot内容，则此参数无效
    * @property {String}         confirmText         ç¡®è®¤æŒ‰é’®çš„文字 ï¼ˆé»˜è®¤ '确认' ï¼‰
    * @property {String}         cancelText         å–消按钮的文字 ï¼ˆé»˜è®¤ '取消' ï¼‰
    * @property {Boolean}         showConfirmButton   æ˜¯å¦æ˜¾ç¤ºç¡®è®¤æŒ‰é’® ï¼ˆé»˜è®¤ true ï¼‰
    * @property {Boolean}         showCancelButton   æ˜¯å¦æ˜¾ç¤ºå–消按钮 ï¼ˆé»˜è®¤ false ï¼‰
    * @property {String}         confirmColor      ç¡®è®¤æŒ‰é’®çš„颜色 ï¼ˆé»˜è®¤ '#2979ff' ï¼‰
    * @property {String}         cancelColor         å–消按钮的颜色 ï¼ˆé»˜è®¤ '#606266' ï¼‰
    * @property {Boolean}         buttonReverse      å¯¹è°ƒç¡®è®¤å’Œå–消的位置 ï¼ˆé»˜è®¤ false ï¼‰
    * @property {Boolean}         zoom            æ˜¯å¦å¼€å¯ç¼©æ”¾æ¨¡å¼ ï¼ˆé»˜è®¤ true ï¼‰
    * @property {Boolean}         asyncClose         æ˜¯å¦å¼‚步关闭，只对确定按钮有效，见上方说明 ï¼ˆé»˜è®¤ false ï¼‰
    * @property {Boolean}         closeOnClickOverlay   æ˜¯å¦å…è®¸ç‚¹å‡»é®ç½©å…³é—­Modal ï¼ˆé»˜è®¤ false ï¼‰
    * @property {String | Number}   negativeTop         å¾€ä¸Šåç§»çš„值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 ï¼ˆé»˜è®¤ 0 ï¼‰
    * @property {String | Number}   width            modal宽度，不支持百分比，可以数值，px，rpx单位 ï¼ˆé»˜è®¤ '650rpx' ï¼‰
    * @property {String}         confirmButtonShape   ç¡®è®¤æŒ‰é’®çš„样式,如设置，将不会显示取消按钮
    * @event {Function} confirm   ç‚¹å‡»ç¡®è®¤æŒ‰é’®æ—¶è§¦å‘
    * @event {Function} cancel      ç‚¹å‡»å–消按钮时触发
    * @event {Function} close      ç‚¹å‡»é®ç½©å…³é—­å‡ºå‘，closeOnClickOverlay为true有效
    * @example <u-modal :show="true" title="title" content="content"></u-modal>
    */
   export default {
      name: 'u-modal',
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      data() {
         return {
            loading: false
         }
      },
      watch: {
         show(n) {
            // ä¸ºäº†é¿å…ç¬¬ä¸€æ¬¡æ‰“å¼€modal，又使用了异步关闭的loading
            // ç¬¬äºŒæ¬¡æ‰“å¼€modal时，loading依然存在的情况
            if (n && this.loading) this.loading = false
         }
      },
      methods: {
         // ç‚¹å‡»ç¡®å®šæŒ‰é’®
         confirmHandler() {
            // å¦‚果配置了异步关闭，将按钮值为loading状态
            if (this.asyncClose) {
               this.loading = true;
            }
            this.$emit('confirm')
         },
         // ç‚¹å‡»å–消按钮
         cancelHandler() {
            this.$emit('cancel')
         },
         // ç‚¹å‡»é®ç½©
         // ä»ŽåŽŸç†ä¸Šæ¥è¯´ï¼Œmodal的遮罩点击，并不是真的点击到了遮罩
         // å› ä¸ºmodal依赖于popup的中部弹窗类型，中部弹窗比较特殊，虽然有遮罩，但是为了让弹窗内容能flex居中
         // å¤šäº†ä¸€ä¸ªé€æ˜Žçš„遮罩，此透明的遮罩会覆盖在灰色的遮罩上，所以实际上是点击不到灰色遮罩的，popup内部在
         // é€æ˜Žé®ç½©çš„子元素做了.stop处理，所以点击内容区，也不会导致误触发
         clickHandler() {
            if (this.closeOnClickOverlay) {
               this.$emit('close')
            }
         }
      }
   }
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";
   $u-modal-border-radius: 6px;

   .u-modal {
      width: 650rpx;
      border-radius: $u-modal-border-radius;
      overflow: hidden;

      &__title {
         font-size: 16px;
         font-weight: bold;
         color: $u-content-color;
         text-align: center;
         padding-top: 25px;
      }

      &__content {
         padding: 12px 25px 25px 25px;
         @include flex;
         justify-content: center;

         &__text {
            font-size: 15px;
            color: $u-content-color;
            flex: 1;
         }
      }

      &__button-group {
         @include flex;

         &--confirm-button {
            flex-direction: column;
            padding: 0px 25px 15px 25px;
         }

         &__wrapper {
            flex: 1;
            @include flex;
            justify-content: center;
            align-items: center;
            height: 48px;
				
            &--confirm,
            &--only-cancel {
               border-bottom-right-radius: $u-modal-border-radius;
            }
				
            &--cancel,
            &--only-confirm {
               border-bottom-left-radius: $u-modal-border-radius;
            }

            &--hover {
               background-color: $u-bg-color;
            }

            &__text {
               color: $u-content-color;
               font-size: 16px;
               text-align: center;
            }
         }
      }
   }
</style>