新建盐城德森项目

skyouc

2024-12-21 c9c263dc43ad90f95f24a036cee9e6b47afb596c

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

@@ -1,143 +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>
<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>