项目初始化

gaoluyang

6 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

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

¶Ô±ÈÐÂÎļþ
@@ -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>