vue2.0自定义指令示例代码详解

下面是关于“vue2.0自定义指令示例代码详解”的完整攻略。

什么是Vue自定义指令？

Vue.js 除了已经提供的指令（如 v-if、v-show、v-bind 等），还可以定义自己的指令。指令的定义是全局的，并且可以在一个 Vue 实例的模板中的其他地方多次使用。
定义指令通常你需要在全局 Vue.options.directives 上添加一个函数 transform 函数。

Vue自定义指令示例代码详解

下面将通过两个示例介绍Vue自定义指令。

示例一：实现全局搜索组件的自动聚焦功能

我们通过一个全局搜索组件来简单实现自定义指令。在input元素被渲染时自动聚焦。下面是HTML中的代码片段：

<template>
  <input v-focus type="text" placeholder="Search">
</template>

要实现这个功能，我们需要创建一个自定义指令，并命名为 'focus'，然后在 Vue 实例中将其注册为全局指令。下面是Vue的该自定义指令的代码：

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

• 代码解析

该指令对象接受几个钩子函数（均为可选），其中最常用的是inserted（插入到DOM中时触发）。inserted 钩子函数表明当被绑定元素插入到 DOM 中时执行。这里我们通过v-focus绑定自定义指令，当该元素被插入到页面中时，它会自动被接收到焦点。

示例二：实现全局点击外部自动关闭弹出框功能

我们经常会遇到这样的场景：在页面上存在一个弹窗，在点击弹窗外部时弹窗自动关闭。下面是HTML代码片段：

<div id="app">
  <div v-clickoutside="close">
    <!--弹窗-->
  </div>
</div>

要实现这个功能，我们需要创建一个自定义指令，并命名为 clickoutside，它会在dom上添加一个事件，监听委托在document上的鼠标点击事件。当鼠标点击事件触发时，通过一个处理函数 close 来关闭弹窗。下面是Vue的该自定义指令的代码：

Vue.directive('clickoutside', {
  bind: function (el, binding, vnode) {
    el.__vueClickOutside__ = function (e) {
      // 判断点击的是否是当前元素内部的元素
      if (!el.contains(e.target)) {
        // 调用指令所在的组件中的方法
        vnode.context[binding.expression]()
      }
    }
    // 在 document 全局事件中添加 closeClick 方法
    document.addEventListener('click', el.__vueClickOutside__)
  },
  unbind: function (el, binding) {
    // 在 document 全局事件中移除 closeClick 方法
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
})

• 代码解析

该指令对象定义了bind和unbind两个方法。其中，bind 在绑定时执行一次，并初始化了一个事件，该事件监听的是 document 的全局 click 事件。unbind 在指令解绑时执行，清除了绑定在 el 之上的事件。

总结

以上是关于Vue自定义指令的攻略，我们通过两个简单示例代码，详细讲解了如何自定义指令并且在实际场景中应用，希望对您有所帮助。