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

当归10242024-06-10 12:37

背景

在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 后面才是消息的样式，这样就可以保证只改变消息内容区域的样式，按钮一直保持在下面