Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)


Posted in Javascript onOctober 23, 2019

在项目中往往会有这样的需求: 弹出框(或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);
   }
 }
  // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
  el.__vueClickOutside__ = documentHandler;
  document.addEventListener('click', documentHandler);
 },
 update() {},
 unbind(el, binding) {
  // 解除事件监听
  document.removeEventListener('click', el.__vueClickOutside__);
  delete el.__vueClickOutside__;
 },
};
export default {
 name: 'HelloWorld',
 data() {
  return {
   show: true,
  };
 },
 directives: {clickoutside},
 methods: {
  handleClose(e) {
   this.show = false;
  },
 },
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.show {
 width: 100px;
 height: 100px;
 background-color: red;
}
</style>

上面这种是网上比较火的一种方式(实际我没有测试过),其实思路还是那个思路 (给document增加一个click事件监听,当发生click事件的时候判断是否点击的当前对象,不是就隐藏),优点就是可以封装成全局/局部的指令,可多处使用。

下面简单介绍下 vue 指令

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind:只调用一次,指令与元素解绑时调用。

第三种方式:遮罩

<template>
 <div>
  <div class="mask" v-if="showModal" @click="showModal=false"></div>
  <div class="pop" v-if="showModal">
    <button @click="showModal=false" class="btn">点击出现弹框</button>
  </div>
  <button @click="showModal=true" class="btn">点击出现弹框</button>
 </div>
</template>

<script>
export default {
 data() {
  return {
   showModal: false
  };
 }
};
</script>

<style scoped>
.mask {
 background-color: #000;
 opacity: 0.3;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1
}
.pop {
 background-color: #fff;
 
 position: fixed;
 top: 100px;
 left: 300px;
 width: calc(100% - 600px);
 height:calc(100% - 200px);
 z-index: 2
}
.btn {
 background-color: #fff;
 border-radius: 4px;
 border: 1px solid blue;
 padding: 4px 12px;
}
</style>

上面这个就是添加一个看不见的遮罩替代 document ,点击遮罩就隐藏。但是要注意:mask(遮罩)层的层级(z-index)要比弹出的pop的层级低。

总结

以上所述是小编给大家介绍的Vue 实现点击空白处隐藏某节点的三种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
详解jQuery插件开发中的extend方法
Nov 19 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
微信小程序网络请求封装示例
Jul 24 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
Openlayers学习之加载鹰眼控件
Sep 28 Javascript
p5.js实现动态图形临摹
Oct 23 #Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 #Javascript
微信小程序 生成携带参数的二维码
Oct 23 #Javascript
使用p5.js临摹动态图形
Oct 23 #Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 #Javascript
p5.js临摹动态图形实现方法详解
Oct 23 #Javascript
jQuery实现轮播图源码
Oct 23 #jQuery
You might like
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
js 小数取整的函数
2010/05/10 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
python常见的格式化输出小结
2016/12/15 Python
python的socket编程入门
2018/01/29 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
python如何调用php文件中的函数详解
2020/12/29 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
物业管理专业自荐信
2014/07/01 职场文书
2014年技术员工作总结
2014/11/18 职场文书
暑期家教宣传单
2015/07/14 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL