vue自定义指令v-nodata在项目中的使用总结

自定义指令首先需引入vue，import Vue from ‘vue’
全局注册一个自定义指令： v-nodata,
Vue.directive(‘nodata’, ‘需要用到的钩子函数’)
将需要用到的钩子函数单独写在一个js中，然后引入noData.js。

import noDataDirective from './noData'
Vue.directive('nodata', noDataDirective)

noData.js中用到bind与update两个钩子函数，代码如下：

bind(el, binding, vnode) {
    if (binding.value) {
      let mainTheme = localStorage.getItem('theme') || 'fanta'
      let imgDom = document.createElement('img');
      imgDom.className = 'noDataImg';
      el.style.position = 'relative'
      el.style.height === '' ? el.style.height = '100%' : ''
      el.style.width === '' ? el.style.width = '100%' : ''
      mainTheme === 'tea' ? mainTheme = 'chalk' : ''
      mainTheme === 'fanta