当按钮是用div写的时候,不能够像button一样直接使用disabled属性,此时可以通过
事件禁用样式 pointer-events: none;
和 鼠标悬浮禁用手势样式 cursor: not-allowed;
来实现类似button按钮disabled属性效果;
但是如果把这两个样式写在一个class里面,事件禁用样式会影响鼠标悬浮禁用手势样式,使得禁用状态无法显示。
解决:将 cursor: not-allowed
写在外层div上
<div class="A">
<div class="aa" @click="f1"></div>
</div>
.aa {
width: 100px;
height: 100px;
border: 2px dashed orange;
pointer-events: none;
}
.A {
cursor: not-allowed;
}