脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue全局修改el-button样式

vue项目如何全局修改el-button样式

 更新时间：2022年07月20日 08:59:54   作者：公孙元二  
这篇文章主要介绍了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

代码：

.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 package-lock.json的作用及说明

    Vue package-lock.json的作用及说明

    这篇文章主要介绍了Vue package-lock.json的作用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue表单验证rules及validator验证器的使用方法实例

    vue表单验证rules及validator验证器的使用方法实例

    在vue开发中,难免遇到各种表单校验,下面这篇文章主要给大家介绍了关于vue表单验证rules及validator验证器使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue3.0 子组件如何修改父组件传递过来的值

    vue3.0 子组件如何修改父组件传递过来的值

    这篇文章主要介绍了vue3.0 子组件如何修改父组件传递过来的值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • HTML页面中使用Vue示例进阶（快速学会上手Vue）

    HTML页面中使用Vue示例进阶（快速学会上手Vue）

    Vue是用于构建用户界面的渐进式JavaScript框架。特色：构建用户界面—数据变成界面；渐进式—Vue可以自底向上逐层的应用。VUE有两种使用方式，一种实在html中直接使用vue做开发，一种是企业级的单页面应用。
    2023-02-02
  • Vue3全局组件注册的实现代码

    Vue3全局组件注册的实现代码

    在这篇文章中,我们将学习一下 Vue3 的全局组件注册是如何实现的,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-12-12
  • Vue.js函数式组件的全面了解

    Vue.js函数式组件的全面了解

    函数式组件就是函数是组件,组件是函数,它的特征是没有内部状态、没有生命周期钩子函数、没有this（不需要实例化的组件）,这篇文章主要给大家介绍了关于Vue.js函数式组件的相关资料,需要的朋友可以参考下
    2021-10-10
  • Vue Elenent实现表格相同数据列合并

    Vue Elenent实现表格相同数据列合并

    这篇文章主要为大家详细介绍了Vue Elenent实现表格相同数据列合并，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • vue仿element实现分页器效果

    vue仿element实现分页器效果

    这篇文章主要介绍了vue仿element实现分页器效果，实现思路是定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2)，具体实例代码大家参考下本文
    2018-09-09
  • Vue 解决通过this.$refs来获取DOM或者组件报错问题

    Vue 解决通过this.$refs来获取DOM或者组件报错问题

    这篇文章主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue+vue-meta-info动态设置meta标签教程

    vue+vue-meta-info动态设置meta标签教程

    这篇文章主要介绍了vue+vue-meta-info动态设置meta标签教程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04

最新评论