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' ? mainTheme = 'chalk' : ''
      imgDom.style.cssText = 'margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;'
      imgDom.src = `/static/images/system/noData_${mainTheme}.png`
      el.appendChild(imgDom)
    }
  },
  update(el, binding, vnode) {
    if (!binding.value && binding.oldValue) {
      el.querySelector('img').style.display = 'none'
    }
  }

系统中有四个主题，v-nodata绑定的图片，tea、chalk、fanta这三种主题用一张图片/static/images/system/noData_chalk.png， dark主题用/static/images/system/noData_dark.png。
bind：只调用一次，指令第一次绑定到元素时调用，在bind里面可以进行一次性的初始化设置。
bind函数中的参数注释：
el: 指令所绑定的元素，可以用来直接操作 DOM;
binding: 是一个对象，binding.value是指令所绑定的值，如：v-nodata=‘true’,绑定值为true;
vnode: Vue 编译生成的虚拟节点。
update：所在组件的 VNode 更新时调用，其参数同bind中的参数。
当值变为false的时候，将v-nodata所绑定的DOM隐藏。

v-nodata在echarts图表中的应用：

当echarts有值时，显示图表，无值时显示v-nodata绑定的图片。
这里容易忽略的地方有两个：
给v-nodata绑定的元素添加v-else，否则有值时，v-nodata所在元素也显示，所占空间就会变大，甚至出现滚动条；
给其一个高度 style=“height: 250px”，否则图片位置不会居中，会有偏差导致效果不好。