vue2点击div以外的地方隐藏
时间: 2023-07-18 07:29:51 浏览: 42
实现这个功能可以使用 Vue.js 的自定义指令和事件监听。具体步骤如下:
1. 创建一个自定义指令 v-click-outside,用于监听 div 外面的点击事件;
2. 在指令的 bind 钩子中绑定一个事件监听器,用于在 div 外面点击时隐藏 div;
3. 在指令的 unbind 钩子中移除事件监听器。
以下是一个简单的实现代码:
```html
<template>
<div>
<button @click="showDiv">显示 div</button>
<div v-if="isShow" v-click-outside="hideDiv">这是要隐藏的 div</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
};
},
directives: {
'click-outside': {
bind: function(el, binding, vnode) {
el.clickOutsideEvent = function(event) {
// 判断点击的元素是否在 el 内部,如果不在则隐藏 el
if (!(el === event.target || el.contains(event.target))) {
vnode.context[binding.expression](event);
}
};
document.body.addEventListener('click', el.clickOutsideEvent);
},
unbind: function(el) {
document.body.removeEventListener('click', el.clickOutsideEvent);
},
},
},
methods: {
showDiv() {
this.isShow = true;
},
hideDiv() {
this.isShow = false;
},
},
};
</script>
```
在这个示例中,我们创建了一个指令 v-click-outside,并在 div 元素上使用该指令绑定一个事件监听器。在 bind 钩子中,我们绑定了一个事件监听器,用于在 div 外面点击时隐藏 div。在 unbind 钩子中,我们移除了事件监听器,以避免内存泄漏。
注意,这个实现只是一个简单的示例,你可以根据具体的需求进行修改和扩展。