详解Vue用自定义指令完成一个下拉菜单（select组件）

//全局注册
Vue.directive('my-directive', {
 // 指令选项
})

// 局部注册
var app = new Vue({
 el: '#app'
 directives: {
  'my-directive': {
    // 指令选项
  }
})

// html部分

// js部分
Vue.directive('focus', {
 // 当绑定元素插入到 DOM 中。
 inserted: function (el) {
  // 聚焦元素
  el.focus()
 }
})

// HTML部分

 


// JS部分
Vue.directive('demo', {
 bind: function (el, binding, vnode) {
  var s = JSON.stringify
  el.innerHTML =
   'name: '    + binding.name + '
' +
   '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'
 }
})

name: "test"
value: "some text"
expression: "message"
argument: "msg"
modifiers: {"a":true,"b":true}
vnode keys: tag, data, children, text, elm, ns, context, functionalContext, functionalOptions, functionalScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder

在多数使用场景，我们会在bind钩子里绑定一些事件，比如在document上用addEventListerer绑定，在unbind里有
removeEventListener 解绑，比较典型的示例就是让这个元素随着鼠标拖拽。

如果需要更多个值，自定义指令也可以传入一个JavaScript对象字面量， 只要是合法类型的JavaScript表达式都是可以的。示例代码如下：

// HTML部分

 



//JS部分
Vue.directive('test', {
 bind: function (el, binding, vnode) {
  console.log(binding.value.msg)
  console.log(binding.value.name)
 }
})
var app = new Vue({
 el: '#app'
})

Vue 2.x很移除大量Vue 1.x自定义指令的配置。在使用自定义指令时，应该充分解业务需求，因为很多时候你需要的可能并不是自定义指令，而是组件。

基础的东西讲完了，我们来根据directive提供的API来写一个点击外部区域可以让其下拉列表消失的菜单

// HTML部分

 

  点击显示下拉菜单
  

   
下拉框内容，点击外面区域可以关闭
  


// JS部分
var app = new Vue({
 el: '#app',
 data: {
  show: false
 }，
methods: {
 handleClose() {
  this.show = false;
 }
}
})

Vue.directive('clickoutside', {
 bind: function(el, binding, vode) {
  function documentHandler (e) {
   if (el.contains(e.target)) {
    return false
   }
   if (binding.expression) {
    binding.value(e)
   }
  }
  el.__vueClickOutSide__ = documentHandler
  document.addEventListener('click', documentHandler)
 },
 unbind: function(el, binding) {
  document.removeEventListener('click', el.__vueClickOutSide__)
  delete el.__vueClickOutSide__
 }
})

要在document上绑定click事件，所以在bind钩子内声明了一个函数documentHandler，并将它作为句柄定在document的click事件上。documentHandler函数做了两个判断，第一个是判断点击的区域是否是指令所在的元素内部，如果是，就跑出函数，不信下继续执行

contains方法是用来判断元素A是否包含了元素 B，包含返回true，不包含返回false

// HTML

 父元素
 
子元素

// JS
var a = doucment.getElemengById('parent')
var b = doucment.getElemengById('children')
console.log(A.contains(B)) // true
console.log(B.contains(A)) // false

第二个判断是当前 的指令v-clickoutside有没有写表达式，在该自定义指令中，表达 式应该是第一个函数 ，在过滤了内部元素后，点击外面任何区域应该招待用户表达 式中的函数 ，所以binding.value就用来执行上下文methods中指定的函数的

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。