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

目录
  • button标签样式和功能禁用
    • 1.不选中情况下
    • 2.选中情况下
    • 3.代码
  • vue el-button样式自定义
    • 用按钮切换界面

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;
}

用按钮切换界面

<el-button type="info" data-id="2" plain :style="{'background-color': tab == 2 ? '#839DB9' : '','color': tab == 2 ? 'white' : 'black'} " @click="tabChange">11111</el-button>
<el-button type="info" data-id="3" plain :style="{'background-color': tab == 3 ? '#839DB9' : '','color': tab == 3 ? 'white' : 'black'} " @click="tabChange">2222</el-button>
<div v-show="tab==2" class="width48"></div>
<div v-show="tab==3" class="width48"></div>

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue $attrs & inheritAttr实现button禁用效果案例

    Vue $attrs & inheritAttr实现button禁用效果案例

    components/Button.vue <template> <div> <button :disabled="$attrs.disabled">点击</button> </div> </template> <script> export default { inheritAttrs: false, } </script> <style scoped> </style&

  • vue中点击切换按钮功能之点启用后按钮变为禁用

    vue中点击切换按钮功能之点启用后按钮变为禁用

    实现方法分位三步: 在template中设置2个按钮,通过v-if ,v-show来控制: data中设置按钮的默认值: methods中控制点击按钮切换效果. <template> <el-table :data="tableData" border style="width: 100%"> <el-table-column fixed prop="date" label="日期" width=

  • vue实现页面内容禁止选中功能,仅输入框和文本域可选

    上网上翻了翻,共找到两种方式 CSS样式控制,只需将下面代码复制到 vue应用下,index.html文件中的body标签上 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-se

  • 详解三种方式解决vue中v-html元素中标签样式

    Vue为v-html中标签添加CSS样式 <template> <div class="hello"> <section> <h2 class="title">{{news.title}}</h2> <p class="news-time">{{news.datetime}}</p> <div class="con" v-html=&qu

  • vue中button标签样式和功能禁用的写法

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

    目录 button标签样式和功能禁用 1.不选中情况下 2.选中情况下 3.代码 vue el-button样式自定义 用按钮切换界面 button标签样式和功能禁用 需求:常用的表格编辑功能,都是只有选中某行数据才能显示样式编辑和内容编辑,不选中为灰度且不能编辑(次编辑一般为弹框修改内容) 1.不选中情况下 2.选中情况下 3.代码 样式禁用: :class="{disable: selections.length == 0}" 功能禁用: :disabled="selec

  • vue中实现高德定位功能

    一.获取key及在index.htm中引入 首先需要成为高德开发者,申请到适合项目的key.并在index.html中进行引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=d79ff396531b948ce14d5be1c733fc36"></script> 二.在配置文件中进行相应配置 根据vue脚手架的不用需要在不同的文件

  • vue中实现回车键登录功能

    created() { let that = this; document.onkeypress = function(e) { var keycode = document.all ? event.keyCode : e.which; if (keycode == 13) { that.login();// 登录方法名 return false; } }; } 以上的代码,在这几天测试发现有一个问题,在登录进系统之后,从首页切换到其他界面,点击回车,会导致界面调整到首页! 要实现: 只在Log

  • vue中添加语音播报功能的实现

    vue中添加语音播报功能的实现

    1:首先把我们的静态资源文件加入到前端工程项目当中 我这里mp3文件就是要播报的语言文件 2: 页面中加入标签 <!-- src 后面的链接是我保存在static文件下的一段报警声 --> <audio v-show="false" id="audioSuccessIn" src="/static/successIn.mp3"/> <audio v-show="false" id="au

  • 浅谈 vue 中的 watcher

    观察 Watchers 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher .这是为什么 Vue 提供一个更通用的方法通过watch 选项,来响应数据的变化.当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的. 大家对于 watch 应该不陌生,项目中都用过下面这种写法: watch: { someProp () { // do something } } // 或者 watch: { someProp: { deep: true, handler ()

  • 在vue中使用v-bind:class的选项卡方法

    //vue中的选项卡的实现,数据驱动dom,因此需要使用数据,来改变class: 详细见代码实现 <style> ul{overflow: hidden;} ul li{float: left;width: 150px;height: 35px;line-height: 35px;border: 1px solid red;list-style: none;cursor: pointer;} ul li.active{background-color: yellow} </style&g

  • 在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

    最近工作中碰到一个需求,添加一条数据时,自动记住上次选择的下拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:....... 好吧,都王的差不多了,于是经过一番百度实践,测试,总算是可以了,接下来就说说实践以及一些坑! 开发环境: webpack+vue+java后台 要实现这个小功能,其实只需要在vue中写相应的功能就可以了,并不需要在后台写什么,但是如果写的不正确,后台也是会报错的,代码如下: 先把这几个方法写上,删除的看需求决定需不需要:

  • Vue中搭配Bootstrap实现Vue的列表增删功能

    在日常开发中,我们可以用 “拿来主义” 借助Bootstarp现成的一些样式,快速生成我们想要的页面布局,避免书写大量的HTML和CSS代码,省下了许多不必要的时间. 当我们想要生成表单表格时我们可以查看Bootstrap的官方文档,来选择我们想要的样式,并根据自己的一些实际情况或者个人喜好进行一定的修改.了解Bootstrap 为了直接搭配Vue使用,我们把表单代码直接复制到 root 容器里面. <div id="root"> <!-- 卡片区域 --> &

  • vue 中directive功能的简单实现

    2018年首个计划是学习vue源码,查阅了一番资料之后,决定从第一个commit开始看起,这将是一场持久战!本篇介绍directive的简单实现,主要学习其实现的思路及代码的设计(directive和filter扩展起来非常方便,符合设计模式中的 开闭原则 ). 构思API <div id="app" sd-on-click="toggle | .button"> <p sd-text="msg | capitalize">

  • Vue中添加手机验证码组件功能操作方法

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 写在前面: 今天要实现的功能是在 完善个人信息页面(vue)中添加手机验证码组件,当用户点击 手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中: <template > <div>

随机推荐