el-button点击后颜色变化
时间: 2023-10-05 11:14:59 浏览: 370
可以通过为按钮添加 `:class` 或 `:style` 属性来控制按钮的样式。下面是一个例子,当按钮被点击时,它的背景色将变为灰色:
```html
<el-button @click="changeColor" :style="{ backgroundColor: bgColor }">点击我</el-button>
```
```javascript
data() {
return {
bgColor: '#409EFF'
}
},
methods: {
changeColor() {
this.bgColor = '#999'
}
}
```
在上面的代码中,我们为按钮绑定了一个点击事件 `@click="changeColor"`,当按钮被点击时,`changeColor` 方法将被调用,其中 `bgColor` 的值将被更新为灰色。我们使用 `:style` 属性将 `bgColor` 作为按钮背景色的值来绑定。这样,当 `bgColor` 的值发生变化时,按钮的背景色也会相应地发生变化。
相关问题
el-button点击后文字颜色变化
您可以使用 `:active` 和 `:visited` 伪类来改变 `<el-button>` 元素的文本颜色。例如:
```css
.el-button:active,
.el-button:visited {
color: red;
}
```
这将使点击 `<el-button>` 元素后的文本颜色变为红色。您可以根据需要更改颜色值。
怎么设置el-button的默认颜色且不改变hover时颜色的变化
你可以使用以下CSS代码来设置el-button的默认颜色,并且保持hover时颜色的变化不变:
```css
.el-button {
background-color: #409EFF; /* 设置默认背景色 */
color: #fff; /* 设置默认文字颜色 */
}
.el-button:hover {
background-color: #66b1ff; /* 设置hover时的背景色 */
}
```
这样,el-button的默认背景色会被设置为#409EFF,并且默认文字颜色为白色。当鼠标移动到按钮上时,背景色会变为#66b1ff,文字颜色不变。你可以根据自己的实际需求修改颜色值。