## 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 | 接收服務器推送信息事件 | 服務器返回數據 |