详解vue中点击空白处隐藏div的实现(用指令实现)


Posted in Javascript onApril 19, 2018

简单想应该怎么实现?

1、肯定是给document增加一个click事件监听
2、当发生click事件的时候判断是否点击的当前对象
结合着本思路和指令咱们来实现。

简单介绍vue指令

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

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

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

详解vue中点击空白处隐藏div的实现(用指令实现)

代码实现

创建指令对象,分析放在代码中

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
js获取div高度的代码
Aug 09 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
javascript时间差插件分享
Jul 18 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 #Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 #Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 #Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 #Javascript
详解react-redux插件入门
Apr 19 #Javascript
vuex state及mapState的基础用法详解
Apr 19 #Javascript
使用vuex的state状态对象的5种方式
Apr 19 #Javascript
You might like
PHP实现的封装验证码类详解
2013/06/18 PHP
Prototype String对象 学习
2009/07/19 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
JS获取时间的方法
2015/01/21 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python 调用c语言函数的方法
2017/09/29 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
化妆师职业生涯规划书
2014/02/16 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书