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

在窄屏模式下(移动端或pda),提示框的宽度太宽,会出现显示不完全的问题。 应当如何修改 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: 'elmessageWidth'
}).then(() => {this.$message({message: '已成功注销',type: 'success'})
}).catch(() => {  })
<style scoped>...
</style>
<style>.elmessageWidth {width: 350px;}
</style>

或者直接important

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/502788.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【多所高校主办】第五届机电一体化技术与智能制造国际学术会议(ICMTIM 2024)

第五届机电一体化技术与智能制造国际学术会议&#xff08;ICMTIM 2024&#xff09; 2024 5th International Conference on Mechatronics Technology and Intelligent Manufacturing 第五届机电一体化技术与智能制造国际学术会议&#xff08;ICMTIM 2024&#xff09;将于2024…

Python Web开发记录 Day5:jQuery(JavaScript库)

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 五、jQuery1、jQuery-选择器和菜单案例①快速上…

IT廉连看——Uniapp——配置文件pages

IT廉连看——Uniapp——配置文件pages [IT廉连看] 本堂课主要为大家介绍pages.json这个配置文件 一、打开官网查看pages.json可以配置哪些属性。 下面边写边讲解 新建一个home页面理解一下这句话。 以下一些页面的通用配置 通用设置里我们可以对导航栏和状态栏进行一些设…

智能水表预付费管理系统

智能水表预付费管理系统是当前智能水表技术的重要应用之一&#xff0c;结合了智能化管理和预付费功能&#xff0c;为水务公司和用户提供了便捷、高效的用水管理解决方案。该系统利用先进的科技手段&#xff0c;实现了水表抄表、计费和管理的自动化&#xff0c;为用户带来更便捷…

杭电OJ 2044 一只小蜜蜂... C++

思路&#xff1a;本质与斐波那契数列一样&#xff0c;关键在于a与b之差 #include <iostream> #include <vector> using namespace std; int main() { vector<long long> nums(51); nums[0] 0; nums[1] 1; nums[2] 2; for (int i 3; i < 5…

汽车虚拟仿真技术的实现、应用和未来

汽车虚拟仿真技术是一种利用计算机模拟汽车运行的技术&#xff0c;以实现对汽车行为的分析、评估和改进。汽车虚拟仿真技术是汽车工业中重要的开发设计和测试工具&#xff0c;可以大大缩短产品研发周期、降低研发成本和提高产品质量。本文将从汽车虚拟仿真技术的实现过程、应用…

《C++进阶--10.多态》

目录 10. 多态 10.1 多态的基本概念 10.2 多态案例一-计算器类 10.3 纯虚函数和抽象类 10.4 多态案例二-制作饮品 10.5 虚析构和纯虚析构 10.6 多态案例三-电脑组装 10. 多态 10.1 多态的基本概念 多态是C面向对象三大特性之一 多态分为两类 静态多态: 函数重载 和 运算…

MySQL进阶:MySQL的体系结构及存储引擎

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;首期文章 &#x1f4da;订阅专栏&#xff1a;MySQL进阶 希望文章对你们有所帮助 数据库的相关知识大家肯定都学过&#xff0c;而…

C++的常用排序(未完待续)

注&#xff1a;本文以升序为例 一、冒泡排序 1.1 操作方法 步骤1比较相邻元素&#xff0c;如果前者比后者大&#xff0c;则交换它们。步骤2对头到尾&#xff0c;对所有元素按序执行一轮这样的操作(这样可以找到第一最大值)步骤3再从第一个元素开始&#xff0c;重复上述比较操…

【.NET Core】深入理解IO - FileSteam流

【.NET Core】深入理解IO - FileSteam流 文章目录 【.NET Core】深入理解IO - FileSteam流一、IO流概述二、文件流FileStream2.1 FileStream概述2.2 FileStream检测流位置更改2.3 FileStream构造函数2.4 FileStream常用属性2.5 FileStream.Read方法2.6 FileStream.Write方法2.7…

WIN10 无密码自动登录

1、家里重装了一下WIN10系统&#xff0c;第一次登陆居然用了微软网站账号&#xff0c;结果密码忘记了&#xff0c;后面只能用PIN码登陆系统。 2、需要登录微软的网站修改密码&#xff1a; Microsoft account | Sign In or Create Your Account Today – Microsoft 3、在运行…

ywtool check命令及ywtool clean命令

提示:工具下载链接在文章最后 目录 一.ywtool check命令1.1 ywtool check -I1.2 ywtool check all1.3 ywtool check io1.4 ywtool check elk1.5 ywtool check php1.6 ywtool check mysql1.7 ywtool check nginx1.8 ywtool check system1.9 ywtool check docker_nbip [容器名称]…