//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
