Vue.directive 自定义指令的使用

一个组件可能因为层级关系，无法快速显示，这时候就可将一个组件放置body中

// append-to-body.js
export default {
  inserted: function (el, { value = true }) {
    if (!value) {
      return
    }
    document.body.appendChild(el)
  },
  unbind (el) {
    // document.body.removeChild(el)
  }
}

import appendToBody from './append-to-body'
Vue.directive('appendToBody', appendToBody)

使用指令：

 <table v-appendToBody="value" ></table>

注入：

// main.js
import '@/directives/directives'