vue用自定义指令（当数据为空时，显示暂无数据的图片）

//v-empty="{el:'echart1',show:value}"
//class是要替换的元素的类名（）
//flag是判断图片显示隐藏的依据
//必须要指定宽高
Vue.directive('empty', 
  (el, binding, vnode, oldVnode)=> {
    Vue.nextTick(()=>{
      let show=binding.value.show
      let Elclass=binding.value.el
      const _DOM = el.querySelector(`.${Elclass}`);
      if(!_DOM){
        console.log('传的对应的类名不对')
        return
      }
      if(show){
        _DOM.style.display='block'
        const empty_content = el.querySelector('.empty_content');
        if(empty_content)empty_content.remove()
      }else{
        _DOM.style.display='none'
        let div=document.createElement("div");
        div.className="empty_content"
        div.style.height=el.clientHeight + 'px'
        div.style.width=el.clientWidth + 'px'
        div.style.display='flex'
        div.style.alignItems='center'
        div.style.justifyContent='center'
        let img=document.createElement("img");
        img.setAttribute('src','no-data.png')
        div.appendChild(img)
        el.appendChild(div)
      }
    })
  },
)

使用如图（value:true/false //为控制显示判断的依据）

<div class="echart_content" v-empty="{el:'echart1',show:value}">
              <div  class="echart1">数据展示</div>
</div>

QQ截图20221222143333.png