#

whycq

2024-04-14 35affebf36d975f2f19d01f09a114c99155e03c3

 uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue

New file
@@ -0,0 +1,143 @@
<template>
   <view class="uni-popup-message">
      <view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
         <slot>
            <text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
         </slot>
      </view>
   </view>
</template>

<script>
   import popup from '../uni-popup/popup.js'
   /**
    * PopUp 弹出层-消息提示
    * @description 弹出层-消息提示
    * @tutorial https://ext.dcloud.net.cn/plugin?id=329
    * @property {String} type = [success|warning|info|error] 主题样式
    *  @value success 成功
    *    @value warning 提示
    *    @value info 消息
    *    @value error 错误
    * @property {String} message 消息提示文字
    * @property {String} duration 显示时间，设置为 0 则不会自动关闭
    */

   export default {
      name: 'uniPopupMessage',
      mixins:[popup],
      props: {
         /**
          * 主题 success/warning/info/error     默认 success
          */
         type: {
            type: String,
            default: 'success'
         },
         /**
          * 消息文字
          */
         message: {
            type: String,
            default: ''
         },
         /**
          * 显示时间，设置为 0 则不会自动关闭
          */
         duration: {
            type: Number,
            default: 3000
         },
         maskShow:{
            type:Boolean,
            default:false
         }
      },
      data() {
         return {}
      },
      created() {
         this.popup.maskShow = this.maskShow
         this.popup.messageChild = this
      },
      methods: {
         timerClose(){
            if(this.duration === 0) return
            clearTimeout(this.timer) 
            this.timer = setTimeout(()=>{
               this.popup.close()
            },this.duration)
         }
      }
   }
</script>
<style lang="scss" >
   .uni-popup-message {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      justify-content: center;
   }

   .uni-popup-message__box {
      background-color: #e1f3d8;
      padding: 10px 15px;
      border-color: #eee;
      border-style: solid;
      border-width: 1px;
      flex: 1;
   }

   @media screen and (min-width: 500px) {
      .fixforpc-width {
         margin-top: 20px;
         border-radius: 4px;
         flex: none;
         min-width: 380px;
         /* #ifndef APP-NVUE */
         max-width: 50%;
         /* #endif */
         /* #ifdef APP-NVUE */
         max-width: 500px;
         /* #endif */
      }
   }

   .uni-popup-message-text {
      font-size: 14px;
      padding: 0;
   }

   .uni-popup__success {
      background-color: #e1f3d8;
   }

   .uni-popup__success-text {
      color: #67C23A;
   }

   .uni-popup__warn {
      background-color: #faecd8;
   }

   .uni-popup__warn-text {
      color: #E6A23C;
   }

   .uni-popup__error {
      background-color: #fde2e2;
   }

   .uni-popup__error-text {
      color: #F56C6C;
   }

   .uni-popup__info {
      background-color: #F2F6FC;
   }

   .uni-popup__info-text {
      color: #909399;
   }
</style>