<script>
export default {
  data() {
    return {
      sysTitle:'Fsys',
      count:2,
      mesShow:false,
      list:[
        {id:1,content:'您有一条消息。。。。。。'},
        {id:2,content:'您有一条消息。。。。。。'},
        {id:3,content:'您有一条消息。。。。。。'},
        {id:4,content:'您有一条消息。。。。。。'},
        {id:5,content:'您有一条消息。。。。。。'},
        {id:6,content:'您有一条消息。。。。。。'},
      ]
    }
  },
  created() {},
  methods: {
    open(){
      this.mesShow=true;
    },
    handleClose(val){
       this.mesShow=val;
    },
    handleRead(item){
      //item为单条对象
      //ajax代码
    },
    handleAllread(name){
      //name为系统标识，如文件管理系统标识为Fsys
      //ajax代码
    }
  }
}
</script>
<style lang="less" scoped>
  .demo-block {
    >div {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
</style>

# 消息提醒

----
采用`iview-ui`中的样式变量，简化功能，熟悉 css \(^o^)/~。

### 基础用法

- 消息提醒弹框

<div class="demo-block">
   <i class="h-icon-xiaoxi" style="font-size:26px" @click="open"></i>
   <Badge dot>
      <i class="h-icon-xiaoxi" style="font-size:26px;margin-left:50px" ></i>
   </Badge>
   <Badge :count="10">
      <i class="h-icon-xiaoxi" style="font-size:26px;margin-left:50px" ></i>
   </Badge>
  <div>
      <h-mesNotificate
      :sysTitle="sysTitle"
      :messageShow="mesShow"
      :messageList="list"
      :messageUnreadCount="count"
      @handleClose="handleClose"
      @handleRead="handleRead"
      @handleAllread="handleAllread">
      </h-mesNotificate>
  </div>
</div>

:::demo





```html
  <div>
      <h-mesNotificate
      :sysTitle="sysTitle"
      :messageShow="mesShow"
      :messageList="list"
      :messageUnreadCount="count"
      @handleClose="handleClose"
      @handleRead="handleRead"
      @handleAllread="handleAllread">
      </h-mesNotificate>
  </div>
  <script>
 export default {
  data() {
    return {
      sysTitle:'Fsys',
      count:10,
      mesShow:false,
      list:[
        {id:1,content:'您有一条消息。。。。。。'},
        {id:2,content:'您有一条消息。。。。。。'},
        {id:3,content:'您有一条消息。。。。。。'},
        {id:4,content:'您有一条消息。。。。。。'},
        {id:5,content:'您有一条消息。。。。。。'},
        {id:6,content:'您有一条消息。。。。。。'},
      ]
    }
  },
  created() {},
  methods: {
    handleClose(val){
      this.mesShow=val;
    },
    handleRead(item){
      //item为单条对象
      //ajax代码
    },
    handleAllread(name){
      //name为系统标识，如文件管理系统标识为Fsys
      //ajax代码
    }
  }
}
</script>

```
:::
### Attributes
| 参数                | 说明                       | 类型   | 可选值 | 默认值 |
| ------------        | --------------------      | ------ | ------ | ------ |
| messageShow             | 是否显示平台切换          | Boolean  | -   | false       |
| messageList             | 消息数据        | Array  | -   | []       |
| messageUnreadCount             | 未读消息条数      | Number  | -   | 0       |
| sysTitle             | 系统标识参数，如文件系统为Fsys    | String  | -   | -      |



### Events
| 事件名         | 说明             | 返回参数                       |
| -------------- | ---------------- | ---------------------------- |
| @handleClose |关闭消息提醒弹框时触发的方法  | - |
| @handleRead |点击单条已读触发的方法  | -|
| @handleAllread |点击全部已读触发的方法 | -|



