Vue中使用CSS（pointer-events）禁止鼠标的点击事件

📝 个人简介

⭐ 个人主页：我是段段🙋‍
🍊 博客领域：编程基础、前端💻
🍅 写作风格：干货！干货！都是干货！
🍑 精选专栏：Vue
🛸 支持段段：点赞👍、收藏⭐、留言💬

前言

  在有些场景下，我们需要根据数组的长度或者一个布尔值去把原本可点击区域（如：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 {
			goIndex: true
        }
    }
	methods(){
        onGoIndex(){
            /*
             * 逻辑操作...
             */
        }
    }
}    
</script>

二、CSS样式

.go-index {
	cursor: pointer;
	pointer-events: auto;
}
.not-go-index {
	cursor: default;
    pointer-events: none; // 禁止点击事件
}

以上就可以通过CSS实现Vue中的点击事件禁用功能了~