el-message 样式
时间: 2023-06-30 19:18:30 浏览: 136
消息提示 包含各种样式
4星 · 用户满意度95%
el-message 是基于 Element UI 库中的一个消息提示组件,其样式可以通过以下方式进行自定义:
1. 使用 Element UI 提供的主题定制工具,可以在官网找到。通过该工具可以修改全局样式,包括 el-message 组件的样式。
2. 在组件使用时,可以通过传递 props 进行样式自定义。可用的 props 包括:
- type:消息类型,可选值为 success、warning、error、info,默认为 info。
- message:消息内容。
- center:是否居中显示,值为 true 或 false,默认为 false。
- show-icon:是否显示图标,值为 true 或 false,默认为 true。
- icon-class:图标类名,可用于自定义图标。
- custom-class:自定义类名,可用于自定义样式。
例如:
```
<el-message
type="success"
message="操作成功"
center
show-icon
icon-class="custom-icon"
custom-class="custom-message"
></el-message>
```
在样式文件中可以使用类名 `.custom-message` 和 `.custom-icon` 进行样式自定义。
阅读全文