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 相关文章推荐
使用Javascript接收get传递的值的代码
Nov 30 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
js自定义input文件上传样式
Oct 26 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
微信小程序基础教程之echart的使用
Jun 01 Javascript
基于angular实现树形二级表格
Oct 16 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
php判断表是否存在的方法
2015/06/18 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
JavaScript File分段上传
2016/03/10 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
layui表格数据重载
2019/07/27 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python实现多线程抓取妹子图
2015/08/08 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
Django REST framework内置路由用法
2019/07/26 Python
django 微信网页授权登陆的实现
2019/07/30 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
python 制作本地应用搜索工具
2021/02/27 Python
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
房地产员工找工作的自我评价
2013/11/15 职场文书
公司授权委托书样本
2014/09/15 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
高一语文教学反思
2016/02/16 职场文书
《山中访友》教学反思
2016/02/24 职场文书
合同范本之电脑出租
2019/08/13 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL