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原有的样式，达到修改按钮的样式的目的。
总结
Element-UI是一个基于Vue.js 2.0 的桌面端组件库，因为它具有便捷易用的特性，在前端开发中得到广泛的应用。而在使用它的过程中，我们很可能需要对按钮样式进行定制化，本文就来和您分享一下如何使用Vue ElementUI改造按钮样式。
一、悬停样式调整
悬停是按钮常用的交互方式，在样式定制中必不可少。而ElementUI中的按钮悬停样式默认较为简单，我们可以通过以下方式来调整：
.love{
.el-button--primary{
&:hover{
background-color: #d5eaf1;
color: #2c4569;
}
}
}
这段代码实现了对主要按钮悬停时的颜色和字体颜色的改变。当然，您可以依据项目需要进行自定义修改，更符合样式要求。
二、文本标记样式调整
当您需要向按钮上加入文本标记时，可能会遇到某些标记样式与您项目主题不符，此时可以通过以下代码轻松解决问题：
.love {
.el-button__text{
font-size: inherit; /* 设置字体大小为继承上一级的字体大小 */
span{
background-color: #f86a4b;
margin-left: 4px;
font-size: 10px;
color: #fff;
}
}
}
此段代码实现了对按钮上文本标记的字体、颜色、背景色和间距的调整。您只需修改您需要的字体和颜色即可。
三、圆角按钮的样式调整
圆角按钮较为简洁，却受到很多项目的喜爱。而ElementUI中的圆角按钮默认样式稍显平淡，可以通过如下代码实现对圆角按钮边框、颜色和文本颜色的自定义修改：
.love {
.el-button--round {
border-radius: 100px; /* 设置边框圆角为20px */
color: #fff;
background-color: #f86a4b;
border: 2px solid #f86a4b;
box-shadow: none;
}
}
通过代码实现了对圆角按钮的圆角边框、颜色和文本颜色的自定义修改。
四、按钮组排列样式调整
在项目中，我们经常需要使用按钮组，调整按钮组排列样式对于整体布局增加很大的灵活性。针对ElementUI中按钮组样式默认的问题，我们可以通过以下代码实现：
.love{
display: flex; /* 将按钮组转成弹性容器 */
.el-button{
margin-right: 5px; /* 给每个按钮增加右边距 */
}
}
此段代码实现了对按钮组的横向排列和对每个按钮的距离调整。您可以针对自己的项目进行排列、宽度等的调整。
五、禁用状态的按钮样式控制
禁用状态的按钮在实际项目中很常见，但ElementUI中的默认样式较少。针对该需求，您可以通过以下代码进行修改：
.love{
.el-button:disabled {
opacity: .5; /* 设置按钮透明度 */
background-color: #ccc;
border-color: #ccc;
}
}
该代码实现了对禁用按钮的透明度、背景色和边框颜色的控制。对于实际项目中的需要，您可以进行样式调整。
六、主题颜色的自定义修改
针对主题颜色，ElementUI中也有默认值，但因为项目的差异性很强，因此很难完全符合项目要求。那么，我们可以通过自定义修改较好地解决该问题。可以通过以下代码进行修改：
$--color-primary:#ef7b61; /* 修改主色变量 */
此段代码实现了对主色的修改。您可以通过修改对应的16进制颜色值或其他值，来调整符合您项目需求的颜色值。
七、总结
通过本文的介绍，您可以了解到如何通过Vue ElementUI来进行对按钮样式进行优化和定制。在使用过程中，指明了悬停、文本标记、圆角按钮、按钮组、禁用状态的按钮和主题颜色的控制等方面的修改。通过这些方法，您可以更加精细地控制按钮样式，使其符合您的项目需要。
