详解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 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
javascript 三种编解码方式
Feb 01 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
vue实现固定位置显示功能
May 30 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
详细分析vue响应式原理
Jun 22 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
C# Assembly类访问程序集信息
2009/06/13 PHP
php array_map()函数实例用法
2021/03/03 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
类似框架的js代码
2006/11/09 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python字符串对其居中显示的方法
2015/07/11 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
Python爬虫与反爬虫大战
2020/07/30 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
会计主管岗位职责范文
2013/11/08 职场文书
设备管理实施方案
2014/05/31 职场文书
通知的格式范文
2015/04/27 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
React列表栏及购物车组件使用详解
2021/06/28 Javascript
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
javascript之Object.assign()的痛点分析
2022/03/03 Javascript