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

<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: 32rpx;
  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>