## Message 全局提示 桌面彈出消息對話框  基礎用法 ```html <cvu-button type="primary" @click="info">顯示普通提示</cvu-button> ``` ```javascript ... info() { this.$cvuMessage.info('這是一條普通提示') } ... ``` 提示類型 > 不同的提示狀態：成功、警告、錯誤。 ```javascript this.$cvuMessage.info('這是一條普通提示') this.$cvuMessage.success('這是一條成功提示') this.$cvuMessage.warning('這是一條警告提示') this.$cvuMessage.error('這是一條失敗提示') ``` 帶背景色 > 設置屬性`background`后，通知提示會顯示背景色。 ```javascript this.$cvuMessage.info({ content: '這是一條普通提示', background: true }) this.$cvuMessage.success({ content: '這是一條成功提示', background: true }) this.$cvuMessage.warning({ content: '這是一條警告提示', background: true }) this.$cvuMessage.error({ content: '這是一條失敗提示', background: true }) ``` 防止連續出現 > 設置`debounce`屬性為`true`，防止頁面連續出現多個提示 ```javascript this.$cvuMessage.info({ content: '這是一條普通提示', debounce: true }) ``` 加載中 > Loading 的狀態，`duration`屬性設置為0，將不自動關閉，可控制在某個時機移除。 ```javascript this.$cvuMessage.loading({ content: '這是一條加載提示', duration: 0 }) setTimeout(() => { this.$cvuMessage.destroy() }, 3000) ``` 自定義時長 > 自定義時長，也可以在`$cvuMessage.config()`中全局配置。 ```javascript this.$cvuMessage.info({ content: '將在10s后消失', duration: 10}) ``` 可關閉 > 將參數設置為一個對象，并指定`closable`為 true 后可以手動關閉提示，完整參數詳見API。 ```javascript this.$cvuMessage.info({ content: '可手動關閉的提示', closable: !0, duration: 10 }) ``` 自定義render函數 > 使用 Render 函數自定義內容。 ```javascript this.$cvuMessage.info({ render: h => { return h('span', [ '這是一條', h('a', 'render'), '創建的提示' ]) } }) ``` ## API ### instance 通過直接調用以下方法來使用組件： * `this.$cvuMessage.info(config)` * `this.$cvuMessage.success(config)` * `this.$cvuMessage.warning(config)` * `this.$cvuMessage.error(config)` * `this.$cvuMessage.loading(config)` 以上方法隱式的創建及維護 Vue 組件。參數 config 可以是字符串或對象，當為字符串時，直接顯示內容，當為對象時，具體說明如下： | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | content | 提示內容 | String | \- | | render | 自定義描述內容，使用 Vue 的 Render 函數 | Function | \- | | duration | 自動關閉的延時，單位秒，不關閉可以寫 0 | Number | 1.5 | | onClose | 關閉時的回調 | Function | \- | | closable | 是否顯示關閉按鈕 | Boolean | false | | background | 是否顯示背景色 | Boolean | false | | <div style="color:#409EFF; text-decoration: underline; " title="新增屬性">debounce</div> | 是否禁止連續出現多個 | Boolean | false | 另外提供了全局配置和全局銷毀的方法： * `this.$cvuMessage.config(options)` * `this.$cvuMessage.destroy()` ```javascript this.$cvuMessage.config({ top: 50, duration: 3 }); ``` | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | top | 提示組件距離頂端的距離，單位像素 | Number | 24 | | duration | 默認自動關閉的延時，單位秒 | Number | 1.5 |