详解Vue用自定义指令完成一个下拉菜单(select组件)
这次分享的是关于Vue自定义指令的使用方法,学习完基础后我们再来实战完成一个下拉列表,废话不多说,直接上干货 基本用法// 局部注册
var app = new Vue({ el: '#app' directives: { 'my-directive': { // 指令选项 } }) 相信对Vue比较熟悉的人看完都知道,directive的写法与组件 基本类似,只是方法名由component改为了directive。上例只是注册了自定义指令v-my-directive,还没实现具体功能,下面具体介绍 自定义指令的各个选项。 指令定义函数提供了几个钩子函数 (可选):
可根据需求在不同的钩子函数 内完成逻辑代码,如下面v-focus,我们希望在元素插入父节点时就调用,那用到的最好的就是inserted了。示例代码如下
// js部分
Vue.directive('focus',{
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
效果如下图所示
可以看到,打开这个页面,input输入框就自动获取焦点了,成为可输入状态。 每个钩子函数 都可以有几个参数可用,比如我们上面用到了el。它们 的含义如下:
下面是结合了以上参数 的一些具体示例,代码如下 ' + 'value: ' + binding.value + ' ' + 'expression: ' + binding.expression + ' ' + 'argument: ' + binding.arg + ' ' + 'modifiers: ' + JSON.stringify(binding.modifiers).modifiers + ' ' + 'vnode keys: ' + Object.keys(vnode).join(',') } }) new Vue({ el: '#app',data: { message: 'some text' } }) 执行后, 的内容会使用innerHTML重置,结果为
在多数使用场景,我们会在bind钩子里绑定一些事件,比如在document上用addEventListerer绑定,在unbind里有 removeEventListener 解绑,比较典型的示例就是让这个元素随着鼠标拖拽。 如果需要更多个值,自定义指令也可以传入一个JavaScript对象字面量, 只要是合法类型的JavaScript表达式都是可以的。示例代码如下: //JS部分 Vue 2.x很移除大量Vue 1.x自定义指令的配置。在使用自定义指令时,应该充分解业务需求,因为很多时候你需要的可能并不是自定义指令,而是组件。 基础的东西讲完了,我们来根据directive提供的API来写一个点击外部区域可以让其下拉列表消失的菜单 下拉框内容,点击外面区域可以关闭
// JS部分 Vue.directive('clickoutside',{ 要在document上绑定click事件,所以在bind钩子内声明了一个函数documentHandler,并将它作为句柄定在document的click事件上。documentHandler函数做了两个判断,第一个是判断点击的区域是否是指令所在的元素内部,如果是,就跑出函数,不信下继续执行 contains方法是用来判断元素A是否包含了元素 B,包含返回true,不包含返回false 第二个判断是当前 的指令v-clickoutside有没有写表达式,在该自定义指令中,表达 式应该是第一个函数 ,在过滤了内部元素后,点击外面任何区域应该招待用户表达 式中的函数 ,所以binding.value就用来执行上下文methods中指定的函数的 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |