vue项目怎么全局修改el-button样式

这篇文章主要介绍“vue项目怎么全局修改el-button样式”,在日常操作中,相信很多人在vue项目怎么全局修改el-button样式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue

这篇文章主要介绍“vue项目怎么全局修改el-button样式”,在日常操作中,相信很多人在vue项目怎么全局修改el-button样式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue项目怎么全局修改el-button样式”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

vue全局修改el-button样式

修改前

vue项目怎么全局修改el-button样式

效果图:

vue项目怎么全局修改el-button样式

代码修改

在APP.vue文件,或者某个.vue文件。

在没有scoped的style标签里面修改:

<style lang="scss">
.el-button--primary{
    color: #1686f5;
    background-color: rgb(240, 248, 255);
    border-color: rgb(148, 197, 238);
    font-size: 14px;
  &:hover {
    color: rgb(240, 248, 255);
    background-color: rgb(148, 197, 238);
    border-color: rgb(148, 197, 238);
  }
  &:active {
    color: rgb(240, 248, 255);
    background-color: rgb(148, 197, 238);
    border-color: rgb(148, 197, 238);
  }
}
<style>

样式2

vue项目怎么全局修改el-button样式

代码:

.el-button--primary {
    color: #1c242c;
    background-color:#f2f6fc;
    border: none;
    font-size: 14px;
  &:hover {
  color: #2483ff;
   background-color: rgb(242,246,252);
  }
  &:active {
    color: #2483ff;
   background-color: rgb(242,246,252);
  }
}

因为本案例修改了primary类型的el-button按钮样式,如果项目中使用了饿了么的this.$confirm,因为确定按钮也是primary类型,所以需要调整primary类型按钮的样式,在App.vue文件(不带scoped的style标签里写入以下代码):

.confirmButton-reset{
    // background: #fff !important;
    // color: #606266 !important;
    font-size: 12px;
    // border-color: #DCDFE6;;
}

在使用了confirm组件的地方,修改确定按钮按钮所使用的样式class:

 this.$confirm('确定要删除?', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'confirmButton-reset'
        })
          .then(() => {

如果想给所有的el-button设置统一样式,比如设置一样的字体大小,代码如下:

.el-button {
  margin-top:3px;
  font-size: 14px;
}

到此,关于“vue项目怎么全局修改el-button样式”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注恰卡网网站,小编会继续努力为大家带来更多实用的文章!

本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
开发者

Spring boot Thymeleaf怎么配置国际化页面

2022-7-23 1:08:05

开发者

Vue中关于this指向的问题怎么解决

2022-7-23 1:08:14

搜索