Message 消息通知

基础用法

<template>
  <div>
    <QMessage
        :tooltipProps="{content:'新的消息'}"
        :header-text="'通知'"
        :fetch-data="fetchMessageData"
    >
      <template v-for="(item,index) in infoList">
        <el-divider content-position="left">
          <!--                  <router-link :to="'/'+item.route" class="link-type">-->
          <el-link type="success">{{ index + 1 + ' . ' + item.caseTitle }}</el-link>
          <!--                  </router-link>-->
        </el-divider>
        <span style="padding: 0 10px;">系统检测到该案宗存在预警：
                                <span style="color: #E6A23C">{{ ' ' + item.ruleTitle + ', ' }}</span>
                                <span style="color: red">{{ item.append }}</span>，请您立即处理！</span>
      </template>
    </QMessage>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        infoList: []
      }
    },
    methods: {
      fetchMessageData() {
        return new Promise(resolve => {
          setTimeout(() => {
            const data = [
              {
                "caseId": "ee8c207e8b55428893e09e08cc8eced3",
                "caseTitle": "你好",
                "ruleTitle": "非法上传代码达到 {} 行",
                "append": "当前值为：9699,大于或等于设定的1987"
              },
              {
                "caseId": "9a9416df59bf4896bd631fbd6c1ad500",
                "caseTitle": "xxx上课吃包子",
                "ruleTitle": "非法采伐公益林和天然林林木面积 {} 亩",
                "append": "当前值为：2222,大于或等于设定的50"
              },
            ]
            this.infoList = data
            resolve(data);
          }, 1000);
        });
      }
    }
  };
</script>

Expand Copy Copy

进阶用法

<template>
  <div>
    <QMessage
        :tooltipProps="{content:'新的消息'}"
        :iconProps="{iconClass:'el-icon-message'}"
        :header-text="'通知'"
        :headerTextStyle="{ color: 'red', fontSize: '20px' }"
        :fetch-data="fetchMessageData"
    >
      <template #header>
        <span>自定义消息</span>
      </template>
      <template #button>
        <el-button type="text" icon="el-icon-check" @click="customRefresh" circle></el-button>
      </template>
      <template v-for="(item,index) in infoList">
        <el-divider content-position="left">
          <!--                  <router-link :to="'/'+item.route" class="link-type">-->
          <el-link type="success">{{ index + 1 + ' . ' + item.caseTitle }}</el-link>
          <!--                  </router-link>-->
        </el-divider>
        <span style="padding: 0 10px;">系统检测到该案宗存在预警：
                                <span style="color: #E6A23C">{{ ' ' + item.ruleTitle + ', ' }}</span>
                                <span style="color: red">{{ item.append }}</span>，请您立即处理！</span>
      </template>
    </QMessage>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        infoList: []
      }
    },
    methods: {
      customRefresh() {
        this.$message.success("点击按钮")
      },
      fetchMessageData() {
        return new Promise(resolve => {
          setTimeout(() => {
            const data = [
              {
                "caseId": "ee8c207e8b55428893e09e08cc8eced3",
                "caseTitle": "你好",
                "ruleTitle": "非法上传代码达到 {} 行",
                "append": "当前值为：9699,大于或等于设定的1987"
              },
              {
                "caseId": "9a9416df59bf4896bd631fbd6c1ad500",
                "caseTitle": "xxx上课吃包子",
                "ruleTitle": "非法采伐公益林和天然林林木面积 {} 亩",
                "append": "当前值为：2222,大于或等于设定的50"
              },
            ]
            this.infoList = data
            resolve(data);
          }, 1000);
        });
      }
    }
  };
</script>

Expand Copy Copy

Attributes

Q-Message

属性名	说明	类型	可选值	默认值
badgeProps	标记配置	Object	badgeProps	—
iconProps	图标配置	Object	iconProps	—
tooltipProps	提示配置	Object	tooltipProps	—
popoverProps	弹框配置	Object	popoverProps	—
showTooltip	显示提示	Boolean	—	false
headerText	消息头部	String	—	'消息'
headerTextStyle	头部样式	Object	—	{fontSize: 'larger', textAlign: 'left', margin: '0', flex: 1}
refreshIcon	按钮图标	String	—	'el-icon-refresh'
fetchData	按钮事件	Function	—	—
popoverWidth	弹出框宽度	String/Number	—	500
scrollHeight	滚动条高度	Number	—	150
time	重复请求时间(s)	Number	-1(不重复)	60
hoverTime	触摸触发时间(ms)	Number	—	500

badgeProps

badgeProps具体属性讲解

属性名	说明	类型	可选值	默认值
attrs	属性透传	Object	-	-
listeners	事件透传	Object	-	-

iconProps

iconProps具体属性讲解

属性名	说明	类型	可选值	默认值
iconClass	图标	String	-	'el-icon-bell'
style	样式	Object	-	style: {fontSize: '20px'}

tooltipProps

tooltipProps具体属性讲解

属性名	说明	类型	可选值	默认值
attrs	属性透传	Object	-	-
listeners	事件透传	Object	-	-
content	内容	String	-	'消息'

popoverProps具体属性讲解

属性名	说明	类型	可选值	默认值
attrs	属性透传	Object	-	-
listeners	事件透传	Object	-	-

Slots

属性名	说明
header	标题插槽
button	按钮插槽