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原有的样式，达到修改按钮的样式的目的。
总结
以上就是几种针对ElementUI按钮组件修改样式的方法，我们可以通过这些方法来实现自定义的样式。只需要根据具体需求来选择相应的修改方法，使页面实现更好的效果。
以上是vue elementui 按钮样式修改的详细内容。更多信息请关注PHP中文网其他相关文章！
