elementui messageBox自定义弹窗的样式(若依)

背景

  • 在scoped中自定义样式之后:发现自定义样式没有生效
html 复制代码
<style scoped>
.custom-alert  {
  height: 300px; /* 你想要设置的高度 */
  overflow-y: auto;
}
</style>

解决方法

  • 新建一个style标签,不要加scoped
  • 样式生效了
html 复制代码
<style>
.custom-alert .el-message-box__message {
  height: 300px; /* 你想要设置的高度 */
  overflow-y: auto;
}
</style>

使用

在使用$alter的时候,使用 属性 customClass

js 复制代码
  this.$alert(response.msg, "导入结果", {
    dangerouslyUseHTMLString: true,
    customClass: 'custom-alert'
  });

延伸

  • 其实这个配置不只是用于$alert,其他的confirm什么的也可以用
  • 其实custom-alert 是整个 弹窗的样式,.el-message-box__message 后面才是消息的样式,这样就可以保证只改变消息内容区域的样式,按钮一直保持在下面
相关推荐
黑客老陈8 分钟前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安13 分钟前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite
暴富的Tdy41 分钟前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se41 分钟前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
m0_748235611 小时前
web 渗透学习指南——初学者防入狱篇
前端
℘团子এ1 小时前
js和html中,将Excel文件渲染在页面上
javascript·html·excel
z千鑫1 小时前
【前端】入门指南:Vue中使用Node.js进行数据库CRUD操作的详细步骤
前端·vue.js·node.js
m0_748250742 小时前
Web入门常用标签、属性、属性值
前端
m0_748230442 小时前
SSE(Server-Sent Events)返回n ,前端接收数据时被错误的截断【如何避免SSE消息中的换行符或回车符被解释为事件消息的结束】
前端