Vue ElementUI 修改消息提示框样式---messageBox 的大小

在窄屏模式下（移动端），提示框的宽度太宽，会出现显示不完全的问题。
应当如何修改 ElementUI 的样式呢？

  open() {this.$confirm(window.vm.$i18n.t("tips.conLogOut"),window.vm.$i18n.t("tips.tip"),{confirmButtonText: window.vm.$i18n.t("backTips.confirm"),cancelButtonText: window.vm.$i18n.t("backTips.cancel"),type: "warning",}).then(() => {this.logout();});},<style scoped>
.el-message-box {width: 235px;
}
</style>

此时在scoped的style中写是无效的，因为ElementUI组件不可以给样式添加scoped，因此必须去掉scoped；但是去掉scoped后不满足单组件的CSS。

解决方案

1、附加在没有scoped的style中

<style scoped>...
</style>
<style>....el-message-box {width: 235px;}
</style>

2、给消息提示框加类名（荐）
更加推荐为这个messageBox添加一个类名，比较科学并且不会影响到其他。

this.$confirm('确认注销吗?', '提示', {customClass: 'message-logout'
}).then(() => {this.$message({message: '已成功注销',type: 'success'})
}).catch(() => {  })
...
<style scoped>...
</style>
<style>....message-logout {width: 350px;}
</style>

或者直接important

@media (max-width: 730px) {.message-logout{width: 350px !important;}}

Vue ElementUI 修改消息提示框样式---messageBox 的大小相关推荐

ElementUI的消息提示框及确认框
前提:在使用以下功能时,都需要引入/导入ElementUI 第一种:消息提示框包含:成功 / 警告 / 信息 / 错误四种类型官方地址:Element - The ...
帆软报表（finereport）使用Event 事件对象 (target)修改提示框样式
target 事件属性 Event 对象定义和用法 target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素.文档或窗口. 语法 event.target 定义结束事件Jav ...
element-ui前端页面消息提示框
前言:本篇博客主要介绍了前端页面的一些消息提示框,均是element-ui中的组件,查找起来比较方便.详细文档可以查看element-ui官网:Element-ui Message消息提示框用来显示 ...
C#MessageBox(消息提示框)使用详解
摘要:以自身经历,自己开发的MessageBox方法测试器详解MessageBox消息提示框的各种不同样式和用法. 编程语言:C# 编程环境:Visual Studio 2019 目录 Message ...
vue实现消息提示框
我们常常看到很多vue生态下的ui框架的消息提示框,在页面切换的时候依然停留在页面,我们知道vue这种单页面渐进式框架,所有的操作和元素都是挂载在一个节点上的,当路由变化是整个节点下的dom元素也在重 ...
vue自定义插件封装一个类似 element 中 message 消息提示框的插件
vue自定义插件封装一个类似 element 中 message 消息提示框的插件一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...
编程语言详细介绍c#消息提示框messagebox的使用
编程语言详细介绍c#消息提示框messagebox的使用这篇文章主要介绍了c#消息提示框messagebox的详解及使用的相关资料,需要的朋友可以参考下 C#消息提示框messagebox的详解及使 ...
JS：原生JS实现message消息提示框
简介学习了一下如何使用原生JS(加上class类)实现message消息提示框的封装(繁琐版). 使用到的主要技术点:class类,JS. 功能点 1.四种提示状态(message success ...
让ElementUI Message消息提示每次只弹出一次
官方效果图遇到的情况是,一进入页面,为空的数据要message消息提示没有该数据,如果很多数据为空,就会如上图弹一整个页面的弹框,用户体验就不是很好. 我目前的解决方案是: 在main.js文件写入 ...

Vue ElementUI 修改消息提示框样式---messageBox 的大小

解决方案

Vue ElementUI 修改消息提示框样式---messageBox 的大小相关推荐

最新文章

热门文章