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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
JS中图片压缩的方法小结
Nov 14 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
vue实现倒计时获取验证码效果
Apr 17 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正则
2006/07/07 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
详解React 元素渲染
2020/07/07 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
Python  连接字符串(join %)
2008/09/06 Python
python中Flask框架简单入门实例
2015/03/21 Python
Python中一行和多行import模块问题
2018/04/01 Python
值得收藏的10道python 面试题
2019/04/15 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
优秀的个人求职信范文
2014/05/09 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
婚姻出轨保证书
2015/05/08 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
天河观后感
2015/06/11 职场文书
小学生安全教育主题班会
2015/08/12 职场文书