网站首页 Vue 正文

vue中button标签样式和功能禁用的写法_vue.js

作者：前热火球员LeBron James 更新时间： 2022-06-04 Vue

button标签样式和功能禁用

需求：常用的表格编辑功能，都是只有选中某行数据才能显示样式编辑和内容编辑，不选中为灰度且不能编辑（次编辑一般为弹框修改内容）

1.不选中情况下

在这里插入图片描述

2.选中情况下

在这里插入图片描述

3.代码

在这里插入图片描述

样式禁用：

:class="{disable: selections.length == 0}"

功能禁用：

:disabled="selections.length == 0"

“selections.length == 0”为满足条件

vue el-button样式自定义

按钮的三种状态

/* 更改elememt-ui地固定样式 */
/*按钮的背景颜色样式*/
.el-button--primary {
  background-color: rgb(247, 146, 146) !important;
}
/*鼠标经过*/
.el-button--primary:hover {
  background-color: rgb(178, 253, 144) !important;
}
/*鼠标按下*/
.el-button--primary:focus {
  background-color: rgb(159, 230, 240) !important;
}

在这里插入图片描述

还可以添加背景图片

但每一个样式后面都要添加!important即可改变按钮的默认样式

按钮的其他样式和平时一样添加就好了

.el-button--primary {
    background-color: #105EED !important;
    color: white !important;
    font-size: 20px;
    height: 66px;
}

在这里插入图片描述

用按钮切换界面

11111
2222

tabChange(e) {
     let tabid = e.currentTarget.dataset.id
     this.tab = tabid
 },

原文链接：https://blog.csdn.net/qq_34663267/article/details/97396113

上一篇：vue2与vue3双向数据绑定的区别说明_vue.js
下一篇：Vue如何设置button的disable属性_vue.js

网站首页 Vue 正文

vue中button标签样式和功能禁用的写法_vue.js

目录

button标签样式和功能禁用

1.不选中情况下

2.选中情况下

3.代码

vue el-button样式自定义

用按钮切换界面

相关推荐