vue elementui 按钮样式修改

Vue.js是一种用于构建交互式网络应用程序的JavaScript框架，而ElementUI是一个基于Vue.js的UI框架。

作为常用的前端UI框架之一，ElementUI提供了许多方便开发人员使用的组件，其中按钮组件是我们通常会用到的，但是有时候默认的按钮样式可能不能满足项目或者需求的要求，这时候我们就需要进行按钮样式的修改。本文将介绍如何用样式修改按钮样式。

ElementUI中按钮的样式可以通过以下方式修改：

1.通过类名来修改

ElementUI的按钮组件有几种默认的样式类供开发者使用，例如primary、danger、warning、info、success等。我们可以通过这些类名来改变按钮的颜色和样式。

<el-button type="primary">primary</el-button>
<el-button type="danger">danger</el-button>
<el-button type="warning">warning</el-button>
<el-button type="info">info</el-button>
<el-button type="success">success</el-button>

这里的type即为按钮的样式类名。

我们也可以通过自定义类名来实现修改样式：

<el-button class="my-btn">Custom</el-button>

.my-btn{
  background-color: #409EFF;
  color: #fff;
}

2.通过内联样式来修改

通过内联样式来修改按钮样式也是可行的方法，通过给按钮组件添加style属性即可实现：

<el-button style="background-color: #409EFF; color: #fff;">Custom</el-button>

3.通过修改全局样式

如果需要应用到整个项目中的所有按钮，我们可以通过修改ElementUI中的全局样式来实现。在Vue中，我们可以通过新建一个.scss文件并在项目入口文件中引入来修改ElementUI的样式。

以下是一个修改ElementUI按钮样式的示例：

// 引入ElementUI的sass全局变量和mixin
@import "~element-ui/packages/theme-chalk/src/common/var.scss";
@import "~element-ui/packages/theme-chalk/src/mixins/mixins.scss";

// 改写ElementUI的变量
$--color-primary: #409EFF;
$--border-radius-base: 4px;

// 自定义按钮样式
.el-button {
  &.my-btn {
    background-color: $--color-primary;
    border: none;
    box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.45);
    color: #fff;
    &:hover {
      background-color: #66b1ff;
      box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.65);
    }
  }
}

上述示例中，我们通过修改ElementUI的全局变量来改变主题色和按钮圆角的大小，然后定义自己的按钮样式，并添加了悬浮时的动态效果。使用自定义class名，来覆盖ElementUI原有的样式，达到修改按钮的样式的目的。

总结

【文章原创作者：阿里云代理 http://www.558idc.com/aliyun.html 复制请保留原URL】