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.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 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求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
javascript中的this详解
2014/12/08 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
python解析xml模块封装代码
2014/02/07 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
python实现画圆功能
2018/01/25 Python
python实现整数的二进制循环移位
2019/03/08 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
华为的Java面试题
2014/03/07 面试题
数组越界问题
2015/10/21 面试题
50岁生日感言
2014/01/23 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS