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.mzph.cn/news/711523.shtml

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

相关文章

11-Linux部署集群准备

Linux部署集群准备 介绍 在前面&#xff0c;我们所学习安装的软件&#xff0c;都是以单机模式运行的。 后续&#xff0c;我们将要学习大数据相关的软件部署&#xff0c;所以后续我们所安装的软件服务&#xff0c;大多数都是以集群化&#xff08;多台服务器共同工作&#xff…

【机器学习实战1】泰坦尼克号:灾难中的机器学习(一)数据预处理

&#x1f338;博主主页&#xff1a;釉色清风&#x1f338;文章专栏&#xff1a;机器学习实战&#x1f338;今日语录&#xff1a;不要一直责怪过去的自己&#xff0c;她曾经站在雾里也很迷茫。 &#x1f33c;实战项目简介 本次项目是kaggle上的一个入门比赛 &#xff1a;Titani…

锚索测力计数据处理与分析:MCU自动测量单元的应用

锚索测力计作为一种重要的工程监测工具&#xff0c;在桥梁、大坝、隧道等结构物的健康监测中发挥着日益重要的作用。如何高效、准确地处理和分析&#xff0c;锚索测力计所获取的数据成为了工程师们面临的重要问题。近年来&#xff0c;随着微控制器(MCU)技术的快速发展&#xff…

Python绘制实时空气质量地图

我们将使用 Google Colab 中的 Python 创建包含实时空气质量数据的交互式地图。 🌟简介 如果有人想查看地图上各个传感器的空气质量分布情况,以检查特定位置的空气质量数据,该怎么办?我接下来将解决这个问题。我们重点关注基于名为 PurpleAir 的密集空气质量网络来识别我们…

spring: HandlerInterceptor

文章目录 一、什么是HandlerInterceptor二、应用示例 一、什么是HandlerInterceptor HandlerInterceptor 是 Spring 框架中的一个接口&#xff0c;用于拦截处理程序执行。在 Spring MVC 中&#xff0c;你可以使用 HandlerInterceptor 来在处理程序执行前、执行后或渲染视图之前…

51-n皇后(回溯算法)

题目 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回所有不同的 n 皇后问题 的解决方案。 每一…

前端开发项目必备神器之node工具整理

前言&#xff1a; 在我们开发项目中&#xff0c;node是我们必备的工具&#xff0c;在为了适应各种不同的开发需求的同时&#xff0c;node也有很多好用的插件提供给我们&#xff0c;这里整理个人的使用分享给大家&#xff01; 一、node相关 1、node官方网站&#xff0c;可以安装…

模拟算法题练习(二)(DNA序列修正、无尽的石头)

&#xff08;一、DNA序列修正&#xff09; 问题描述 在生物学中&#xff0c;DNA序列的相似性常被用来研究物种间的亲缘关系。现在我们有两条 DNA序列&#xff0c;每条序列由 A、C、G、T 四种字符组成&#xff0c;长度相同。但是现在我们记录的 DNA序列存在错误&#xff0c;为了…

ubuntu基础操作(1)-个人笔记

搜狗输入法Linux官网-首页搜狗输入法for linux—支持全拼、简拼、模糊音、云输入、皮肤、中英混输https://pinyin.sogou.com/linux 1.关闭sudo密码&#xff1a; 终端&#xff08;ctrl alt t&#xff09;输入 sudo visudo 打开visudo 找到 %sudo ALL(ALL:ALL) ALL 这一行…

羊大师分享,羊奶奶有哪些对健康有益的喝法?

羊大师分享&#xff0c;羊奶奶有哪些对健康有益的喝法&#xff1f; 羊奶奶有多种对健康有益的喝法&#xff0c;以下是一些建议&#xff1a; 直接饮用&#xff1a;将羊奶直接煮沸后饮用&#xff0c;可以保留羊奶中的营养成分&#xff0c;为身体提供全面的滋养。羊奶的丰富蛋白质…

代码随想录算法训练营第二十八天补|93.复原IP地址 ● 78.子集 ● 90.子集II

组合问题&#xff1a;集合内元素的组合&#xff0c;不同集合内元素的组合 分割问题&#xff1a;本质还是组合问题&#xff0c;注意一下如何分割字符串 回溯模板伪代码 void backtracking(参数) {if (终止条件) {存放结果;return;}for (选择&#xff1a;本层集合中元素&#xf…

Softmax

Softmax函数是一种在机器学习和深度学习中广泛使用的激活函数&#xff0c;特别是在处理多分类问题时。它将一个含任意实数的向量转换成一个概率分布&#xff0c;其中每个元素的值代表了属于对应类别的概率。Softmax函数的输出是所有可能类别的概率分布&#xff0c;这些概率的总…

【六袆 - MySQL】MySQL 5.5及更高版本中,InnoDB是新表的默认存储引擎;

InnoDB 这是一个MySQL组件&#xff0c;结合了高性能和事务处理能力&#xff0c;以确保可靠性、健壮性和并发访问。它体现了ACID设计哲学。它作为一个存储引擎存在&#xff0c;处理使用ENGINEINNODB子句创建的或修改的表。请参阅第14章“InnoDB存储引擎”以获取有关架构细节和管…

【解决】虚幻导入FBX模型不是一个整体

问题&#xff1a; 现在有一个汽车的fbx模型&#xff0c;导入虚幻引擎&#xff0c;导入后变成了很多汽车零件模型。 解决&#xff1a; 把“合并网格体”勾选上&#xff0c;解决问题。

移动端app如何设计测试用例?

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、用户界面测试 布局和元素 验证所 有UI元素&#xff08;如…

C语言拼接字符串操作

代码解法不唯一&#xff0c;请在评论区留下你的实现方式和想法&#xff0c;我会将好的解法更新到文章中&#xff01;&#xff01; 要拼接 “字符串1” 和 “字符串2” &#xff0c;可以使用字符串连接操作。在C语言中&#xff0c;您可以使用strcat函数来将两个字符串连接起来。…

Unity 佳能SDK 及数据获取

1. 填写信息跟官方申请SDK,大概1-2个工作日会邮件回复你 佳能(中国)- 佳定制(佳能影像产品),SDK,EDSDK,CCAPI,软件开发包下载 2. 将SDK这两个文件放到 Unity Plugins文件夹 3. 把CameraControl 下面只要是绿色的 .cs 文件都复制到Unity 中

ElasticSearch搜索引擎使用指南

一、ES数据基础类型 1、数据类型 字符串 主要包括: text和keyword两种类型&#xff0c;keyword代表精确值不会参与分词&#xff0c;text类型的字符串会参与分词处理 数值 包括: long, integer, short, byte, double, float 布尔值 boolean 时间 date 数组 数组类型不…

基于ssm学生公寓管理系统的设计与开发论文

学生公寓管理系统的设计与实现 摘要 如今&#xff0c;科学技术的力量越来越强大&#xff0c;通过结合较为成熟的计算机技术&#xff0c;促进了学校、医疗、商城等许多行业领域的发展。为了顺应时代的变化&#xff0c;各行业结合互联网、人工智能等技术&#xff0c;纷纷开展了…

P1160 队列安排题解

题目 一个学校里老师要将班上N个同学排成一列&#xff0c;同学被编号为1∼N&#xff0c;他采取如下的方法&#xff1a; 先将1号同学安排进队列&#xff0c;这时队列中只有他一个人&#xff1b; 2∼N号同学依次入列&#xff0c;编号为i的同学入列方式为&#xff1a;老师指定编…