@include 'common'

# Message

全局展示操作反馈信息

## 何时使用

可提供成功、警告和错误等反馈信息。

顶部居中显示并自动消失，也可以通过 close 来关闭，是一种不打断用户操作的轻量级提示方式。

## 常用信息

四类：Inline、Toast、 Addon 和 全局提示消息。

可以通过 shape 来调整 Inline、Toast、 Addon 信息；通过 Message.success 等弹出全局提示消息；

### 常用提示类型 Inline、Toast、 Addon

（1）通过 type 属性设置消息类型包括：成功、警告、错误、通知、加载；

（2）通过 bgcolor 属性设置 inline 和 toast 的颜色：根据使用场景颜色有白色和彩色；当页面本身颜色比较花哨时推荐使用白色，当页面比较素净时推荐使用彩色；

（3）通过 closeable 属性设置消息框能否关闭；

（4）只有一种尺寸；

@include 'demo1'

### 全局提示信息弹窗用法

可以通过 Message.success 等静态方法来快速显示指定类型的信息弹窗。弹框展示提示信息并自动消失。
@include 'demo2'

### 弹窗便捷用法

向 Message.success 传递参数：

参数可以是 object 或者 string。

当参数是 object 使用 type 设置消息类型；使用 title 设置消息标题；使用 content 设置消息内容；消息可以只有标题或者只有内容；

通过 closeable 设置消息是否可以关闭，默认情况下不可关闭；通过 duration 可以设置持续时长；
@include 'demo3'

### 受控显示

通过 visible 设置受控显示或隐藏。
@include 'demo4'

### 自定义样式

使用 style 和 className 来定义样式。
@include 'demo5'

### 无障碍支持

通过 Enter 键点击 button 时，自动聚焦到 Message 上读取信息。
@include 'demo6'