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 相关文章推荐
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
采用call方式实现js继承
May 20 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
php explode函数实例代码
2012/02/27 PHP
php错误级别的设置方法
2013/06/17 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
优秀医生事迹材料
2014/02/12 职场文书
初中生期末评语大全
2014/04/24 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
获奖感言怎么写
2015/07/31 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
python process模块的使用简介
2021/05/14 Python