js多种方法实现点击空白处关闭面板

1. v-click-outside

作用：当鼠标点击了指令所绑定元素的外部时，就会触发绑定方法

Install

npm install --save v-click-outside

Use

import vClickOutside from 'v-click-outside'
Vue.use(vClickOutside)

<template>
	<p v-click-outside="onClickOutside"></p>
</template>
<script>
	export default {
		methods: {
			onClickOutside (event, el) {
				console.log('Clicked outside. Event: ', event)
			}
		}
	}
</script>

2.node.contains()

作用：返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点
Use

node.contains(otherNode)

<div class="wrapper" @click="close">
	<div class="child-content" ref="childContent"></div>
</div>
<script>
	export default {
		methods: {
		// 该事件放在最外层的div上
			close(event) {
				const child = this.$refs.childContent
				//不在指定的区域内
				if (!child.contains(event.target)) {
					console.log('这里可以做关闭面板的操作')
				}
			}
		}
	}
</script>

3.directives（vue 自定义指令）

<template>
	<a href="javascript:;" @click="handleClose"></a>
</template>
<script>
	const clickoutside = {
    // 初始化指令
    bind(el, binding, vnode) {
        function documentHandler(e) {
            // 这里判断点击的元素是否是本身，是本身，则返回
            if (el.contains(e.target)) {
                return false
            }
            // 判断指令中是否绑定了函数
            if (binding.expression) {
                // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                binding.value(e)
            }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = documentHandler
        document.addEventListener('click', documentHandler)
    },
    update() {},
    unbind(el, binding) {
        // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__)
        delete el.__vueClickOutside__
    },
}

export default {
	directives: { clickoutside },
	methods: {
		handleClose(e) {
            this.isShowProduct = false
        }
	}
}
</script>

注意： isShowProduct 控制页面元素的显示与隐藏