自定义this.$message.error样式
时间: 2023-05-28 10:05:55 浏览: 89
可以通过修改element-ui的CSS样式来自定义this.$message.error的样式。
1. 打开element-ui的CSS文件,找到以下样式:
```css
.el-message__group.is-with-icon .el-message__icon {
margin-right: 10px;
}
.el-message__icon {
font-size: 16px;
line-height: 1.2;
}
.el-message__content {
font-size: 14px;
line-height: 1.5;
margin-left: 10px;
}
.el-message__closeBtn {
margin-left: 10px;
cursor: pointer;
display: inline-block;
vertical-align: middle;
font-size: 12px;
color: #909399;
transition: color .3s;
}
.el-message__closeBtn:hover {
color: #606266;
}
```
2. 根据需求修改样式,例如:
```css
.el-message__group.is-with-icon .el-message__icon {
margin-right: 10px;
}
.el-message__icon {
font-size: 20px;
line-height: 1.2;
color: #ff0000;
}
.el-message__content {
font-size: 16px;
line-height: 1.5;
margin-left: 10px;
color: #ff0000;
}
.el-message__closeBtn {
margin-left: 10px;
cursor: pointer;
display: inline-block;
vertical-align: middle;
font-size: 12px;
color: #ff0000;
transition: color .3s;
}
.el-message__closeBtn:hover {
color: #ffffff;
}
```
3. 保存CSS文件,重新编译项目,即可看到修改后的样式。