elementui messageBox自定义弹窗的样式（若依）

本文主要是介绍elementui messageBox自定义弹窗的样式（若依），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

背景

• 在scoped中自定义样式之后：发现自定义样式没有生效

<style scoped>
.custom-alert  {height: 300px; /* 你想要设置的高度 */overflow-y: auto;
}
</style>

解决方法

• 新建一个style标签，不要加scoped
• 样式生效了

<style>
.custom-alert .el-message-box__message {height: 300px; /* 你想要设置的高度 */overflow-y: auto;
}
</style>

使用

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

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

延伸

• 其实这个配置不只是用于$alert，其他的confirm什么的也可以用
• 其实custom-alert 是整个 弹窗的样式，.el-message-box__message 后面才是消息的样式，这样就可以保证只改变消息内容区域的样式，按钮一直保持在下面

这篇关于elementui messageBox自定义弹窗的样式（若依）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---