修改element $prompt的文字样式

代码如下

this.$prompt('确认重置吗? 您需要输入 <strong>重置</strong> 确认操作', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',inputPattern: /^重置$/,inputErrorMessage: '请输入正确的确认信息',dangerouslyUseHTMLString: true,customClass: 'reset-message-box',}).then(() => {...
});

这里写了很多重置样式，但是不生效

<style lang="less">
.reset-message-box {background-color: #0e214b;border: 1px solid rgba(20, 98, 248, 0.3);/deep/ .el-input__inner {background: rgba(7, 79, 124, 0.9);color: #03a5eb;border-color: #03a5eb;}/deep/ .el-button:first-of-type {background: rgba(255, 255, 255, 0.2);border: 1px solid rgba(255, 255, 255, 0.4);color: #fff;}/deep/ .el-message-box__title {color: #fff;}/deep/ .el-message-box__headerbtn {color: #fff;}
}
</style>

正确的代码

.reset-message-box {background-color: #0e214b;border: 1px solid rgba(20, 98, 248, 0.3);.el-message-box__title {color: #fff;}.el-message-box__close {color: #fff;}.el-message-box__content {.el-input__inner {background: rgba(7, 79, 124, 0);color: #fff;border-color: rgba(20, 98, 248, 0.3);&:focus {border-color: rgba(20, 98, 248, 0.6);}}}
}

为什么？
先看结构。

再看源码，在messagebox，main.js 里面有这样一段代码

MessageBox.prompt = (message, title, options) => {if (typeof title === 'object') {options = title;title = '';} else if (title === undefined) {title = '';}return MessageBox(merge({title: title,message: message,showCancelButton: true,showInput: true,$type: 'prompt'}, options));
};

$prompt，是通过element-ui的方法在body下渲染出来一个class="el-message-box__wrapper"的div。这div根本就不是一个vue组件，只是使用js操作dom 生成的一些节点元素。所以不具备vue组件的一些特性：如在渲染template模板时，不会在节点上添加data-v-xxxxxx 之类的属性，而scoped 正是运用data-v-xxxxxx属性找到对应的元素实现局部样式控制的。
加了新的class之后，为啥可以展示新的样式？CSS权重，后定义的类会覆盖同权重的样式

修改element $prompt的文字样式相关推荐

confirm修改按钮文字_CAD教程来袭，CAD菜鸟们你知道CAD如何创建和设置文字样式吗？...
嗨,我是爱踢汪.在CAD中,使用文字的时候,我们需要对文字对象进行字体.字号以及一些其它的效果进行设置,用以表达不同情况.所有想要显示的文字外观不同效果的设置,都可以通过使用迅捷CAD编辑器的[ ...
修改表格字体颜色_CAD表格文字样式失灵？不，你错了
CAD也疯狂最近有网友私信,说是插入CAD表格文字样式失灵,不受文字样式控制,插入表格后字体仍然是表格原来的字体.其实CAD插入表格中的文字也是受文字样式控制的,在设置表格样式的时候可以设置使用哪种 ...
CSS/Compass修改placeholder的文字样式
在HTML5中,<input>与<textarea>标签支持placeholder属性,用来定义无任何输入时的默认文字. 可以通过CSS修改placeholder的文字样式: ...
pdfjs 字体新增_JS - PDF文件生成库jsPDF使用详解2（修改文字样式）
三.修改文字样式 1,修改字体大小 var doc = new jsPDF(); //字体大小1(默认样式) doc.text(20, 20, '1: Welcome to hangge.com'); ...
小程序 rich-text 修改图片和文字样式
小程序 rich-text 修改图片和文字样式 utils文件 /*** 处理富文本里的图片宽度自适应* 1.去掉img标签里的style.width.height属性* 2.img标签添加style ...
NC6自助开发文件存放路径及一些总结以及修改自助登录界面的样式、图片、添加文字提示等文件
NC6自助开发文件存放路径:\nchome\hotwebs\portal\sync NC6自助开发总结:https://download.csdn.net/download/u010741112/24 ...
ae批量修改字体_批量修改文字样式字体AE脚本CreativeDojo Dojo Text Updater V1.0
批量修改文字样式字体AE脚本CreativeDojo Dojo Text Updater V1.0 Dojo Text Updater是一个由CreativeDojo开发的After Effects脚 ...
Markdown修改文字样式（字体, 大小, 颜色, 高亮底色）
Markdown修改文字样式(字体, 大小, 颜色, 高亮底色) 简介字体.字号与颜色表格样式设置背景色.文字颜色跨行表格想要了解更多颜色名列表原文参考链接简介 Markdown是一种 ...
ae批量修改字体_|AE多文字样式修改脚本(Dojo Text Updater)下载v1.0 官方版 - 欧普软件下载...
Dojo Text Updater是一款多文字样式修改脚本,有了这款脚本就能够让多个文字图层同时更新样式,包括字体大小.填充颜色.笔触颜色.跟踪和对其等参数,让文字样式修改变得更简单,需要的AE设计师 ...
html链接文字样式,修改word文档中超链接文字样式的操作方法
仅对单个超链接文字做处理我们在Word2007文档中输入网址或E-Mail地址时,Word会自动将它们设置成蓝色的超链接文字,并且在每个超链接文字的下面显示下划线,有时候会给打印文档造成一定的不便. ...

修改element $prompt的文字样式

修改element $prompt的文字样式相关推荐

最新文章

热门文章