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

目录
  • vue全局修改el-button样式
    • 修改前
    • 代码修改
    • 样式2

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;
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ElementUI 修改默认样式的几种办法(小结)

    ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持.该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,本文就基于 react 和 vue 框架介绍几种修改 ElementUI 默认样式的办法. ElementUI下载官网:http://element.eleme.io/#/zh-CN Vue 安装: npm i element-ui -S 使用: import Vue from 'vue'; import ElementUI

  • vue中element-ui组件默认css样式修改的四种方式

    vue中element-ui组件默认css样式修改的四种方式

    目录 前言 1.使用全局统一覆盖 2.在.vue文件中修改 3.修改组件的style样式 4. 参考element-ui官方文档的api 疑问 总结 前言 修改element-ui组件的默认样式一直是一个老生长谈的话题,在做完公司的一整个项目后,我总结了以下4种修改element-ui默认样式的方法. 1.使用全局统一覆盖 针对一些通用的.样式固定的组件,可以全局处理,其方法是新建一个css或者scss文件,覆盖element原有的class 你可以在src/styles目录下新建一个eleme

  • 在vue项目中设置一些全局的公共样式

    目录 vue设置全局的公共样式 思路 vue公共样式与公共方法 问题描述 公共样式 公共方法 vue设置全局的公共样式 本公司开发的产品,在运维去客户哪里上线的时候,客户可能会对产品主页面的一些色调,字体大小等不满意.所以需求就是在我们的开发包在往客户服务器上发布的时候,有一个scss文件可以随时调整这些字体和颜色. 思路 1.首先在public公共文件的css文件夹下面新建一个allstyle.scss的样式文件夹,在这个里面定义一些样式,和字体的大小.这样做的好处就是,在webpack打包的

  • Element el-button 按钮组件的使用详解

    Element el-button 按钮组件的使用详解

    1. 背景 按钮是很常用的,Element的按钮功能还是比较全面的,本篇就来介绍下. 先看下各种按钮的效果图: 在分析源码前,我们先来看一下官方文档对于button的使用说明: 2. 按钮分类 el-button按钮的分类基本是靠颜色区分的,另外还有一种文本按钮type="text",文本按钮由于比较小,比较适合用于表格每行的操作栏部分. 按钮分类: <el-button>默认</el-button> <el-button type="prima

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

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

    目录 vue全局修改el-button样式 修改前 代码修改 样式2 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, 23

  • vue里面父组件修改子组件样式的方法

    在使用 vue 的开发中,我们有时会引用外部组件,包括 UI 组件(ElementUI.iview). 当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. 但是在父组件中添加 scoped 之后,父组件的样式将不会渗透到子组件中,所以在父组件中书写子组件的样式是无效果的. 一.去掉 scoped 在父组件的 <style> 中去掉 scoped 后,父组件中可以书写子组件的样式,但是你会担心这样会污染全局样式. [因为我们知道正确使用全局样式

  • vue项目网站全局置灰功能实现示例详解

    目录 1.前端独立实现 2.通过后台管理控制设置网站的整体置灰样式 1.前端独立实现 两种不同的逻辑,一种是前端自己实现,一种是结合后台管理系统来控制,网站是正常还是置灰. 直接在public文件夹下的index.html文件的html标签里加上style="filter:grayscale(100%)",总的就是<html style="filter:grayscale(100%)"> 2.通过后台管理控制设置网站的整体置灰样式 1.先给public文

  • vue中checkbox如何修改为圆形样式

    目录 checkbox修改为圆形样式 更改AntD中CheckBox样式 checkbox修改为圆形样式 有些时候我们需要对checkbox进行样式修改,例如改为圆圈: checkbox代码 <input type="checkbox" class="layers-item-selector" :value="item.name" v-model="value" /> css样式 .layers-item-sele

  • vue项目中全局引入1个.scss文件的问题解决

    vue项目中全局引入1个.scss文件的问题解决

    首先先发一下我的项目路径 1. 首先要下载   sass-resources-loader npm install sass-resources-loader --save-dev 2.然后再文件夹build/utils里面的更改 scss: generateLoaders('sass') scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.reso

  • django项目、vue项目部署云服务器的详细过程

    django项目、vue项目部署云服务器的详细过程

    目录 上线架构图 服务器购买与远程连接 安装git 安装mysql 安装redis(源码安装) 安装python3.8(源码安装) 安装uwsgi 安装虚拟环境 安装nginx(源码安装) vue项目部署 django项目部署 项目依赖安装 数据库配置 使用uwsgi启动django 后端样式处理 上线架构图 服务器购买与远程连接 服务器可以在阿里云控制台首页 (aliyun.com).登录 - 腾讯云 (tencent.com)购买. 这里我选择购买阿里云的云服务器ECS,购买时按自己需求,镜

  • 使用idea创建vue项目的图文教程

    使用idea创建vue项目的图文教程

    目录 一.安装node.js (1)下载安装包 (2)测试node.js是否安装成功 (3)安装vue和全局vue-cli 二.idea安装vue.js插件 三.创建vue项目 四.修改配置文件 五.配置idea运行的环境 总结 一.安装node.js 官网下载下载地址:Download | Node.js (1)下载安装包 安装过程很简单,全部next即可. (2)测试node.js是否安装成功 在键盘按下win+R键,输入cmd回车,打开cmd窗口: 查看版本操作:node -v和npm -

  • 优雅的处理vue项目异常实战记录

    背景 你还在为处理Uncaught (in promise) ReferenceError烦恼吗? 你还在为捕获异常反复的写try catch吗? 你还在为每一个promise写catch吗? 是时候一站式统一处理异常!!!(针对vue项目) 全局异常捕获 Vue.config.errorHandler = function (err, vm, info) { // 指定组件的渲染和观察期间未捕获错误的处理函数.这个处理函数被调用时,可获取错误信息和 Vue 实例. // handle erro

  • 如何使用HBuilderX把vue项目打包成apk

    如何使用HBuilderX把vue项目打包成apk

    目录 1. 下载HBuilderX 2. 安装HBuilderX 3. 在vscode中打包vue项目 3.1 在打包vue项目之前 3.2 执行打包命令 4. 在HBuilderX中打包apk 4.1 在HBuilderX中新建一个项目 4.2 把之前打包的dist下的内容拷贝到此工程下面 4.3 删除不要的目录 4.4 点击:manifest.json,进行以下配置 1. 下载HBuilderX 官网下载地址:https://www.dcloud.io/hbuilderx.html 2. 安

随机推荐