vue elementui 按钮样式修改

百变鹏仔 2个月前 (10-30) #前端问答

文章标签样式

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原有的样式，达到修改按钮的样式的目的。

总结

文章推荐

vue elementui 按钮样式修改

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗