Vue 中自定义指令

注意！示例使用 CLL 3+创建

在 Vue 中内置了很多方便的指令来操作 html，比如 v-model、v-for、v-if 等。

同时 Vue 给我们提供了自定义指令的接口，让我们灵活的根据自身需要，自定义指令来便捷高效的直接操作 dom。

如何自定义指令？

注册自定义指令有两种方式，分别是全局（可以在任意组件中使用）和组件中（仅在组件中使用）。

全局注册

Vue.directive('指令名称',{钩子函数})

在 new Vue 前注册，下面代码注册了 flash 的全局指令,它让元素每隔 200 毫秒显示和隐藏，类似王者荣耀中闪现的技能效果。

渲染图

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// v-flash
Vue.directive('flash', {
  // bind钩子，指令被绑定到元素时调用，只调用一次。
  // el，该指令所绑定的元素，用来直接操作 DOM 。
  bind: function(el) {
    let isVisible = 'visible'
    setInterval(() => {
      el.style.visibility = isVisible
      isVisible = isVisible == 'hidden' ? 'visible' : 'hidden'
    }, 200)
  }
})

new Vue({
  render: h => h(App)
}).$mount('#app')

应用

给元素应用自定义指令时需要加上 v-前缀。

<!-- App.vue -->
<template>
  <div id="app">
    <h1 v-flash>一闪一闪，亮晶晶</h1>
  </div>
</template>

<script>
  export default {}
</script>

这样 h1元素就出现一闪一闪的效果了。

组件中（局部）注册

同理，组件中注册，在 directives 对象里添加 flash 自定义指令即可。

<template>
  <div id="app">
    <h1 v-flash>一闪一闪，亮晶晶</h1>
  </div>
</template>

<script>
  export default {
    // 组件中组成自定义指令
    directives: {
      flash: {
        bind: function(el) {
          let isVisible = 'visible'
          setInterval(() => {
            el.style.visibility = isVisible
            isVisible = isVisible == 'hidden' ? 'visible' : 'hidden'
          }, 200)
        }
      }
    }
  }
</script>

总结

介绍了自定义全局指令和局部指令，以及如何应用，望你使用愉快。