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与下拉列表处理问题解决
Feb 13 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
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
建立动态的WML站点(一)
2006/10/09 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
JavaScript入门之基本函数详解
2011/10/21 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
使用angular写一个hello world
2015/01/23 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
海量信息软件测试笔试题
2015/08/08 面试题
红旗方阵解说词
2014/02/12 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
关于美容院的活动方案
2014/08/14 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
个人党性分析材料
2014/12/19 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
离婚财产分割协议书
2015/08/11 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js