修改bug遇到的一些小问题1

前提：

加固按钮为img 项目统一用 span标签包裹并且已经存在一个clsss类名
想法：因为是有点击事件的，所以打算在触发事件后判断数据为加固中时不进行其他操作，反之再操作，因为项目中禁用都是用disabled所以打算用css做禁用样式，由于已经存在一个class类名，所以只能使用

---

问题描述

表格数据加固中状态不能点击操作栏加固按钮 ，开发时有使用disabled后期测试失效了
原代码代码：

<template v-slot="{ row }">
  <span style="padding:0px" circle class="action_icon" :disabled="row.status==2" @click="fasten(row)">
    <img src="@/images/icon_fasten.png" :title="$t('AppManage.sdkStrengPage.reinforce')" alt="" />
  </span>
  <span style="padding:0px" circle class="action_icon" :disabled="row.status==2" @click="downLoad(row)">
    <img src="@/images/icon_download.png" :title="$t('public.Download')" alt="" />
  </span>
</template>

---

原因分析：

input/button标签disabled以后，click事件就无效了，但是！！！span标签disabled以后,click事件还是有效的
因为span按钮disabled属性⽆效，span它原生不支持disabled这个属性
解决⽅案：
使⽤css属性pointer-events ,设置为none可以禁⽌点击事件：

span{
　　pointer-events:none;
　　}

恢复点击事件：

span{
　　pointer-events:auto;
　　}

pointer-events属性介绍
1、阻⽌⽤户的点击动作产⽣任何效果
2、阻⽌缺省⿏标指针的显⽰
3、阻⽌CSS⾥的 hover 和 active 状态的变化触发事件
4、阻⽌JavaScript点击动作触发的事件

---

解决方案：

因为是有点击事件的，所以打算在触发事件后判断数据为加固中时不进行其他操作，反之再操作，因为项目中禁用都是用disabled所以打算用css做禁用样式，由于已经存在一个class类名，所以只能使用**:class**
OK，回归正题
修改后的代码

<template v-slot="{ row }">
  <span circle :class="[{'action_icon': true},{'disabled_icon': row.status == 2}]" @click="downLoad(row)">
  	  <img src="@/images/icon_fasten.png" :class="[{'action_icon': true},{'disabled_icon': row.status == 2}]":title="$t('public.Download')" alt="" />
  </span>
  <span :class="[{'action_icon': true},{'disabled_icon': row.status == 2}]" @click="downLoad(row)">
    <img src="@/images/icon_download.png" :title="$t('public.Download')" alt="" />
  </span>
</template>