vue element插件this.$confirm修改默认样式

App.vue全局样式定制：修改El-message-box组件

最新推荐文章于 2024-11-20 16:45:05 发布

原创最新推荐文章于 2024-11-20 16:45:05 发布 · 873 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

javascript 同时被 3 个专栏收录

82 篇文章

订阅专栏

前端

77 篇文章

订阅专栏

vue.js

27 篇文章

订阅专栏

文章介绍了如何在Vue应用的全局样式中，对ElementUI的`.el-message-box`组件进行定制，包括边框、内边距、头部样式和按钮颜色等。

1.在App.vue全局添加样式

  .el-message-box{
    border: none !important;
  }
  .el-message-box__content{
    padding: 20px 15px !important;
  }
  .el-message-box__header {
  background: #b2afb3 !important;
  padding: 10px 15px 10px !important;
}
.el-message-box__title{
  color: #fff !important;
}
.el-message-box__header .el-message-box__headerbtn{
  top: 10px !important;
}
.el-message-box__header .el-message-box__headerbtn .el-message-box__close{
  color: #fff !important;
}

.el-button--primary{
  background: #b2afb3 !important;
  border-color:#b2afb3 !important;
}