js文件

  1. export default {
  2. bind(el, binding, vnode) {
  3. function documentHandler(e) {
  4. if (el.contains(e.target)) {
  5. return false
  6. }
  7. if (binding.expression) {
  8. binding.value(e)
  9. }
  10. }
  11. el.__vueClickOutside__ = documentHandler
  12. document.addEventListener('click', documentHandler)
  13. document.addEventListener('touchmove', documentHandler)
  14. },
  15. update() {},
  16. unbind(el, binding) {
  17. document.removeEventListener('click', el.__vueClickOutside__)
  18. document.removeEventListener('touchmove', el.__vueClickOutside__)
  19. delete el.__vueClickOutside__
  20. }
  21. }

组件里头

v-clickoutside="handleClose"

import clickoutside from '../../directives/clickoutside'

directives: { clickoutside }

即刻!

vue-clickoutside d的更多相关文章

  1. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

  2. vue自定义指令clickoutside使用以及扩展用法

    vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...

  3. vue自定义指令clickoutside扩展--多个元素的并集作为inside

    都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...

  4. vue自定义指令clickoutside实现点击其他元素才会触发

    clickoutside.js // 代码内容 const clickoutsideContext = '@@clickoutsideContext'; export default { bind(e ...

  5. vue实现一个简易Popover组件

    概述 之前写vue的时候,对于下拉框,我是通过在组件内设置标记来控制是否弹出的,但是这样有一个问题,就是点击组件外部的时候,怎么也控制不了下拉框的关闭,用户体验非常差. 当时想到的解决方法是:给根实例 ...

  6. vue 知识点

    Vue 中的 slot: 概念:槽/slot是组件在模板中为调用者预留的位置,使用<slot>元素声明一个 槽.在最终的视图中,调用者模板中被调用组件的内容,将填充<slot> ...

  7. vue中点击空白处隐藏弹框(用指令优雅地实现)

    在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div c ...

  8. 使用vue实现简单键盘,支持移动端和pc端

    常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用,欢迎点赞,h5 ios输入框与键盘 兼容性优化 实现效果: Keyboard.vue <t ...

  9. Vue中拆分视图层代码的5点建议

    目录 一.框架的定位 二. Vue开发中的script拆分优化 1.组件划分 2.剥离业务逻辑代码 3. 剥离数据转换代码 4. 善用computed和filters处理数据展示 5. 使用direc ...

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

    在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架, ...

随机推荐

  1. jquery动态为个span,input,div,等标签赋值的方法总结,js动态隐藏div

    1.jquery为span和div标签赋值. <span id="span1"></span> <div id="div1"> ...

  2. codevs——1530 大质数

    1530 大质数  时间限制: 1 s  空间限制: 1000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 小明因为没做作业而被数学老师罚站,之后数学老师 ...

  3. com.101tec.ZKClient实现中的subscribeDataChanges设置的监听器事件不回调的问题研究

    1.如果在Web项目,本身在后台运行,所以注册的事件应该是正常回调的. 2.如果是Application项目,如果是简单的测试,那么运行完之后,整个程序就结束了,程序很快,所以没等到事件回调就关了,解 ...

  4. Linux ANSI 乱码问题

    原帖http://blog.chinaunix.net/u/24624/showart_184609.html Windows 到 linux 解决samba-3.x客户端中文乱码问题 dos cha ...

  5. JAVA 如何反编译JAR文件

    1 直接的jar文件可以用winrar解压,然后得到class文件,但是这里得到的class文件也是编译过的二进制文件,用传统的文本编辑器无法打开. 2 用XJad这个软件可以反编译Jar文件,直接找 ...

  6. uva 10716 Evil Straw Warts Live(贪心回文串)

    这道题目我用了一上午才做出来,还是看的别人的思路,尽管没有看代码做的有点慢.代码能力还是得加强啊.思维 得缜密.不能想当然,要有根据,写上的代码要有精确度.省的以后还得慢慢调试 思路:贪心.每次都查看 ...

  7. vim入门级使用

    1.刚进入是 command mode 命令行模式 2.i  进入插入 insert  mode 模式 在插入模式下只能 输入内容,如果要删除内容,需要切换到命令行模式,移动光标进行删除. 3.esc ...

  8. HDU4689Derangement (动态规划)

    题目链接:传送门 题意: 对于一个由1~n组成的长度为n的序列来说它有n!种排法.我们定义初始的排列为1,2,3,...,n对于兴许的排列假设a[i]>i则用'+'表示.a[i]<i用'- ...

  9. NOI.AC #31. MST

    好像又是神仙dp....gan了一早上 首先这是个计数类问题,上DP, 对于一个最小生成树,按照kruskal是一个个联通块,枚举边小到大合成的 假如当前边是树边,那么转移应该还是枚举两个块然后合并 ...

  10. 华为FusionSphere概述——计算资源、存储资源、网络资源的虚拟化,同时对这些虚拟资源进行集中调度和管理

    华为FusionSphere概述 FusionSphere是华为自主知识产权的云操作系统,集虚拟化平台和云管理特性于一身,让云计算平台建设和使用更加简捷,专门满足企业和运营商客户云计算的需求.华为云操 ...