## 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 |