crm-mobile/components/uni-popup-message/uni-popup-message.vue

<template>
  <view class="uni-popup-message" :class="'uni-popup__'+[type]">
    <text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">
      {{ message }}
    </text>
  </view>
</template>

<script>
	/**
	 * 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',
    inject: ['popup'],
    props: {
      /**
       * 主题 success/warning/info/error	  默认 success
       */
      type: {
        type: String,
        default: 'success'
      },
      /**
       * 消息文字
       */
      message: {
        type: String,
        default: ''
      },
      /**
       * 显示时间，设置为 0 则不会自动关闭
       */
      duration: {
        type: Number,
        default: 3000
      }
    },
    data() {
      return {}
    },
    created() {
      this.popup.childrenMsg = this
    },
    methods: {
      open() {
        if (this.duration === 0) return
        clearTimeout(this.popuptimer)
        this.popuptimer = setTimeout(() => {
          this.popup.close()
        }, this.duration)
      },
      close() {
        clearTimeout(this.popuptimer)
      }
    }
  }
</script>
<style scoped>
	.uni-popup-message {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		background-color: #e1f3d8;
		padding: 10px 15px;
		border-color: #eee;
		border-style: solid;
		border-width: 1px;
	}

	.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>