pointer-event 和 cursor 属性 在div上实现button的disabled禁用效果
·
当按钮是用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;
}
更多推荐




所有评论(0)