Vue中使⽤CSS（pointer-events）禁⽌⿏标的点击事件
前⾔
  在有些场景下，我们需要根据数组的长度或者⼀个布尔值去把原本可点击区域（如：div或img）的点击事件给禁⽌掉，变成不可点击事件
⼀、DOM元素，添加class属性
⾸先是获得需要判断是否禁⽌的条件；可以是某⼀个变量的布尔值，也可是数组的长度…
<img src='@/assets/img/logo.png' @click="onGoIndex()" :class="goIndex ? 'go-index' : 'not-go-index'"
⽽控制点击区域是否可以点击的属性是
pointer-events: none; // 禁⽌⿏标点击事件
pointer-events：CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为⿏标事件的⽬标
此属性的初始值是 auto
语法：
pointer-events属性被指定为从下⾯的值列表中选择的⼀个关键字
auto：与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同
none：元素永远不会成为⿏标事件的⽬标；但当其后代元素的pointer-events属性指定其他值时，⿏标事件可以指向后代元素，在这种情况下，⿏标事件将在捕获或冒泡阶段触发⽗元素的事件侦听器
visiblePainted：只适⽤于SVG；元素只有在以下情况才会成为⿏标事件的⽬标：
visibility属性值为visible，且⿏标指针在元素内部，且fill属性指定了none之外的值
visibility属性值为visible，⿏标指针在元素边界上，且stroke属性指定了none之外的值
相关部分JS代码
<script>
export default{
data(){
return{
cssclass属性
goIndex:true
}
}
methods(){
onGoIndex(){
/*
* 逻辑操作...
*/
}
}
}
</script>
⼆、CSS样式
.go-index{
cursor: pointer;
pointer-events: auto;
}
.not-go-index{
cursor: default;
pointer-events: none; // 禁⽌点击事件
}
以上就可以通过CSS实现Vue中的点击事件禁⽤功能了~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。