vue通过指令(directives)实现点击空白处收起下拉框


Posted in Javascript onDecember 06, 2018

日常开发中有时会有这样的需求,就是展开下拉框的时候,通过点击空白处,可以实现让下拉框收回。这里我们通过vue2.0中的自定义指令来简单实现。

vue通过指令(directives)实现点击空白处收起下拉框

貌似截图尺寸有点大(???)

vue自定义指令

解释(参考官方文档)

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

举例:

我们要让这样一个输入框在页面加载的时候获得焦点

vue通过指令(directives)实现点击空白处收起下拉框

我们可以注册自定义指令

全局注册:

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
 // 当被绑定的元素插入到 DOM 中时……
 inserted: function (el) {
 // 聚焦元素
 el.focus()
 }
})

局部注册

//组件内
directives: {
 focus: {
 // 指令的定义
 inserted: function (el) {
 el.focus()
 }
 }
}

然后便可以在模板中相关元素上使用自定义的v-focus属性:(这里的v-focus是从自定义的focus得来的)

<input v-focus>

钩子函数(参考官方文档)

上面例子中我们用的钩子是inserted,这个是在被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
vue官方文档上有一些钩子可供我们参考使用:

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

通过自定义指令实现点击空白处隐藏下拉框

关于自定义指令,我们就不再多说了,下面我们来讲下如何通过指令来实现我们这个需求吧。

首先注册全局指令

// 一般在vue项目中的main.js中
// 添加点击空白处的指令
Vue.directive('click-outside', {
 bind: function (el, binding, vnode) {
 el.clickOutsideEvent = function (event) {
 // here I check that click was outside the el and his childrens
 if (!(el == event.target || el.contains(event.target))) {
 // and if it did, call method provided in attribute value
 vnode.context[binding.expression](event)
 }
 }
 document.body.addEventListener('click', el.clickOutsideEvent)
 },
 unbind: function (el) {
 document.body.removeEventListener('click', el.clickOutsideEvent)
 }
})

在需要监听的组件元素上添加自定义指令

// 这里的clickOutSide是在监听到点击的不是
<input id="dropdown1" v-show="flag" v-click-outside="clickOutSide" />

这个id为dropdown1的元素当监听到点击的不是自身的时候,就会触发clickOutSide方法。

在组件里定义响应方法

// 点击空白处使topBar隐藏
 clickOutSide() {
 this.flag = false;
 },

这样就可以实现类似文章开头的那种效果。

是不是很简单哦? 关于指令还有很多比较简便的用法,各位可以自己去研究下哦。

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

Javascript 相关文章推荐
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 #Javascript
JavaScript中引用vs复制示例详析
Dec 06 #Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 #jQuery
express+vue+mongodb+session 实现注册登录功能
Dec 06 #Javascript
如何使用puppet替换文件中的string
Dec 06 #Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 #Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 #Javascript
You might like
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
浅谈php的优缺点
2015/07/14 PHP
动态表格Table类的实现
2009/08/26 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
JS实现打字游戏
2019/12/17 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
基于并发服务器几种实现方法(总结)
2017/12/29 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
高中生学习生活的自我评价
2013/10/09 职场文书
皮肤科医师岗位职责
2013/12/04 职场文书
自我评价个人范文
2013/12/16 职场文书
会计与审计毕业生自荐信范文
2013/12/30 职场文书
银行学习十八大感想
2014/01/11 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
鲁冰花观后感
2015/06/10 职场文书
工作服管理制度范本
2015/08/06 职场文书
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python