vue-clickoutside d
js文件
export default {
bind(el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false
}
if (binding.expression) {
binding.value(e)
}
}
el.__vueClickOutside__ = documentHandler
document.addEventListener('click', documentHandler)
document.addEventListener('touchmove', documentHandler)
},
update() {},
unbind(el, binding) {
document.removeEventListener('click', el.__vueClickOutside__)
document.removeEventListener('touchmove', el.__vueClickOutside__)
delete el.__vueClickOutside__
}
}
组件里头
v-clickoutside="handleClose"
import clickoutside from '../../directives/clickoutside'
directives: { clickoutside }
即刻!
vue-clickoutside d的更多相关文章
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- vue自定义指令clickoutside实现点击其他元素才会触发
clickoutside.js // 代码内容 const clickoutsideContext = '@@clickoutsideContext'; export default { bind(e ...
- vue实现一个简易Popover组件
概述 之前写vue的时候,对于下拉框,我是通过在组件内设置标记来控制是否弹出的,但是这样有一个问题,就是点击组件外部的时候,怎么也控制不了下拉框的关闭,用户体验非常差. 当时想到的解决方法是:给根实例 ...
- vue 知识点
Vue 中的 slot: 概念:槽/slot是组件在模板中为调用者预留的位置,使用<slot>元素声明一个 槽.在最终的视图中,调用者模板中被调用组件的内容,将填充<slot> ...
- vue中点击空白处隐藏弹框(用指令优雅地实现)
在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div c ...
- 使用vue实现简单键盘,支持移动端和pc端
常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用,欢迎点赞,h5 ios输入框与键盘 兼容性优化 实现效果: Keyboard.vue <t ...
- Vue中拆分视图层代码的5点建议
目录 一.框架的定位 二. Vue开发中的script拆分优化 1.组件划分 2.剥离业务逻辑代码 3. 剥离数据转换代码 4. 善用computed和filters处理数据展示 5. 使用direc ...
- Vue 实现点击空白处隐藏某节点(三种方式:指令、普通、遮罩)
在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架, ...
随机推荐
- JavaSE 学习笔记之反射技术(二十四)
反射技术:其实就是动态加载一个指定的类,并获取该类中的所有的内容.而且将字节码文件封装成对象,并将字节码文件中的内容都封装成对象,这样便于操作这些成员.简单说:反射技术可以对一个类进行解剖. 反射的好 ...
- [K/3Cloud]有关单据显示行数限制和数据导出的建议
1.针对显示行数限制: 模仿现在很流行的"查看更多"的模式,动态加载数据. 我相信这一点建议别人也提过,还请总部对此开展头脑风暴,因为在实际使用中客户总是不理解为何要限制行数,解释 ...
- [K/3Cloud]关于"选单"操作
之前有些人对这块有些疑问,比如: 1.选单操作是否和下推基本一样,都是公用同一套单据转换规则,只不过下推是源单推目标单,选单是目标单去选择源单,最终操作结果一样? 2,我想实现选单的时候,选单列表先通 ...
- Ubuntu 16.04下Markdown编辑器Haroopad
1.下载deb包 地址:https://bitbucket.org/rhiokim/haroopad-download/downloads/haroopad-v0.13.2-x64.deb 这里是历史 ...
- CI 日志类
开发ci的过程中,使用log能直观的看出代码运行到哪,还可设置代码查看数据接口的发送情况.日志类: <?php defined('BASEPATH') OR exit('No direct sc ...
- ubuntu update时发生错误
The following packages have been kept back解决方案Ubuntu和Debian下更新软件包,在运行 sudo apt-get upgrade 有时会看到如下提示 ...
- HLJU 1188 Matrix (二维树状数组)
Matrix Time Limit: 4 Sec Memory Limit: 128 MB Description 给定一个1000*1000的二维矩阵,初始矩阵中每一个数都为1,然后为矩阵有4种操 ...
- 京东电商API
大家好~~2016年了~转眼过去三年了...一年没有更新博客了.. ..在上一年里,遇到了几个好哥们,一起写程序一起装逼,以下给大家讲述一下工作上遇到的技术问题,由于这个我開始弄的时候也比較麻烦,不知 ...
- layoutSubviews, setNeedsLayout, layoutIfNeeded
layoutSubviews总结 ios layout机制相关方法 - (CGSize)sizeThatFits:(CGSize)size- (void)sizeToFit——————- - (voi ...
- Android获取全部存储卡挂载路径
近期因项目需求.须要在存储卡查找文件,经測试发现部分手机挂载路径查找不到,这里分享一个有效的方法. /** * 获取全部存储卡挂载路径 * @return */ public static List& ...