## Notification 通知菜单 深度封装的通知菜单，极简单的配置即可完成复杂的通知显示业务，功能丰富。常用在导航工具栏上，作为整个产品统一的通知中心。   ### 代码示例 基础用法 ```html <template> <div class="container"> <cvu-notification :count="notificationConfig.count" :dot="notificationConfig.dot" :placement="notificationConfig.placement" :empty-image="notificationConfig.emptyImage" :data="notificationConfig.data" @on-show="handleMessageShow" @on-click="handleMessageClick" @on-message="handleMessage" /> </div> </template> <script> export default { data () { return { notificationConfig: { count: 10, dot: false, placement: 'bottom-start', emptyImage: require('@/assets/images/menu-none.png'), data: [ { id: 1, title: '消息1' }, { id: 2, title: '消息2' }, { id: 3, title: '消息3' }, { id: 4, title: '消息4' }, { id: 5, title: '消息5' } ] } } }, mounted () {}, methods: { // 点击消息图标 => 展示消息列表弹窗 handleMessageShow() { console.log('消息列表显示') }, // 点击消息列表 / 查看更多 => 进入消息页面 handleMessageClick(e) { console.log('消息列表/更多点击', e) }, // 接收服务器推送的信息 => 设置消息数量 handleMessage(e) { this.notificationConfig.count = JSON.parse(e.data).count } } } </script> ``` 设置展示封顶数值 > 设置封顶数量`overflow-count`属性值，当count值大于封顶数量时显示`封顶数量+`  ```html <cvu-notification :count="100" :overflow-count="99" :data="notificationConfig.data" /> ``` 小红点代替数字展示 > 设置`dot`属性值为true,小红点代替消息数量  ```html <cvu-notification :count="20" :dot="true" :data="notificationConfig.data" /> ``` 空数据 > 消息数据`data`为空显示空消息提示，可设置空数据提示图片  ```html <cvu-notification :data="[]" :empty-image="notificationConfig.emptyImage" /> ``` ### props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | trigger | 触发方式，可选值为`hover`（悬停）`click`（点击）`focus`（聚焦）,在 confirm 模式下，只有 click 有效 | String | click | | placement | 提示框出现的位置，可选值为top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | String | bottom| | width | 宽度，最小宽度为 150px，在 confirm 模式下，默认最大宽度为 300px | String \| Number | 240 | | theme | 主题色，可选值 light \| dark | String | light | | offset | 出现位置的偏移量 | Number | 0 | | dis-arrow | 是否隐藏小三角 | Boolean | true | | count | 消息数量 | Number | 0 | | overflow-count | 展示封顶的数字值 | Number \| String | 99 | | dot | 不展示数字，只有一个小红点，如需隐藏 dot ，需要设置count为 0 | Boolean | false | | websock-url | websock url地址，此参数不传时不自动初始化websocket | String | \- | | data | 消息列表数据(格式：[ { id: '', title: '' } \]) | Array | [] | | empty-image | 消息列表空数据提示图片 | String | \- | | empty-image-size | 消息列表空数据提示图片大小 | Number | 100 | | empty-description | 消息列表空数据提示文字 | String | 暂无数据 | ### events | 事件名 | 说明 | 返回值 | | --- | --- | --- | | on-show | 点击消息图标事件 | 无 | | on-click | 点击消息列表 / 查看更多事件 | 当前消息对象 | | on-message | 接收服务器推送信息事件 | 服务器返回数据 |