this.$message消息提示 改变提示背景颜色
时间: 2023-11-16 21:00:12 浏览: 69
可以使用this.$message的第二个参数options来设置提示框的样式,其中可以设置background-color属性来改变提示框的背景颜色。例如:
```
this.$message({
message: '提示内容',
type: 'success',
duration: 2000,
center: true,
showClose: true,
offset: 100,
customClass: 'my-message',
// 设置背景颜色
options: {
background-color: '#f00'
}
});
```
相关问题
this.$modal.msgSuccess和this.$message有什么区别
this.$modal.msgSuccess 和 this.$message 都是 Vue.js 中常见的消息提示组件。其中,this.$message 是 Element UI 中的组件,而 this.$modal.msgSuccess 则可能是自定义组件或者其他 UI 框架中的组件,具体需要根据具体的项目来确定。
一般来说,两者的功能类似,都可以用来弹出消息提示框,但是具体的区别还是要看具体的实现。一些可能的区别包括:
- 样式:this.$modal.msgSuccess 可能会有自定义的样式,而 this.$message 则是 Element UI 默认的样式。
- 功能:this.$modal.msgSuccess 可能会提供更多的功能,比如可以自定义按钮、输入框等等,而 this.$message 则只能用来显示简单的文字提示。
- 使用方式:this.$modal.msgSuccess 可能需要先引入某个组件或者插件才能使用,而 this.$message 则是 Element UI 自带的,直接可以使用。
总之,具体选择哪个组件需要根据具体的需求来决定。
this.$message 提示的字体大小
根据引用中提供的样式代码,可以看出this.$message提示的字体大小是20px,因为在样式中有一个类名为addqd的选择器,它设置了字体大小为20px。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue——ElementUI 如何修改this.$message消息提示框样式及内容样式](https://blog.csdn.net/qq_18835599/article/details/120087159)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [elementUI this.$confirm 文字大小样式](https://blog.csdn.net/qq_37804387/article/details/130435282)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]