Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）
2 浏览量
2020-10-16
03:26:42
上传
评论
收藏 67KB PDF 举报
Vue 实现点击空白处隐藏某节点的三种方式实现点击空白处隐藏某节点的三种方式(指令、普通、遮指令、普通、遮
罩）罩）
最近小编接到这样的需求：弹出框（或Popover）在 show 后，点击空白处可以将其 hide。针对这个需求，小编
整理了三种实现方式，如果大家对vue 点击空白隐藏节点问题感兴趣的朋友跟随小编一起看看吧
在项目中往往会有这样的需求： 弹出框（或Popover）在 show 后，点击空白处可以将其 hide。
针对此需求，整理了三种实现方式，大家按实际情况选择。
当然，我们做项目肯定会用到 UI 框架，常见的 Element 中的组件提供了这样的方法。
但是，就算使用框架，有些时候还是要用到的，比如：
Element 中的 Popover，当我们想使用手动方式(trigger 触发方式为 manual时)控制它的 show & hide 的时候，就要自己实现
这个功能啦。
第一种方式：最普通的手动监听判断第一种方式：最普通的手动监听判断
<span ref="projectButton">
<el-popover v-model="visible" trigger="manual" placement="bottom" @show="show" @hide="hide">
<p>啦啦啦</p>
<el-button slot="reference" type="primary" @click="visible = !visible">show</el-button>
</el-popover>
</span>
data () {
return {
visible: false
}
},
methods: {
show () {
document.addEventListener('click', this.hidePanel, false)
},
hide () {
document.removeEventListener('click', this.hidePanel, false)
},
hidePanel (e) {
if (!this.$refs.projectButton.contains(e.target)) {
this.visible = false
this.hide()
}
}
}
上面就是在 Popover show 的时候监听 document 的 click 事件，触发进入 hidePanel 方法，判断当前点击的 el 是否在
Popover 内部，如果不在，则手动 hide Popover ，并且移除监听事件。
这个还是蛮好理解的，我使用的也是这种方式，因为我的项目中需要这种需求的很少(好吧，就一个地方)，所以我采用了这种
方式。
第二种方式：第二种方式： 指令指令
<template>
<div>
<div class="show" v-show="show" v-clickoutside="handleClose">
显示
</div>
</div>
</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);
资源评论
weixin_38509656
- 粉丝: 7
- 资源: 909
