问答一下,轻松解决,电脑应用解决专家!
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win10/Win11
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascriptLinux系统
PHP教程CSS教程XML教程

vue:div span 等没有disabled属性的标签设置禁用(禁止点击)和置灰

更新时间:2021-07-19 16:06 作者:系外行星研究僧点击:

div和span是一样的,这里仅以span做演示

首先动态添加notClick的样式:

 <span :class="{notClick:isNotClick}"  @click="handleDel(scope.row)">删除</span>
.notClick {
  // pointer-events: none;
  color:grey;
  cursor:not-allowed;
}

这里遇到一个知识点,pointer-events:none和cursor: not-allowed不能同时用 也就是禁止点击和鼠标的红圈加斜杠不能同时在css中设置,那么我们只能转而向js求助。

通过在点击事件中判断是否禁用点击:

 handleDel(data) {
     if(data.status){
        return;
    }

我这里是通过判断数据中的状态如果为1也就是同步成功了,就禁用点击删除。

显示结果如下:

至此,问题得以解决。

顶一下
(2)
100%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容