1 Vue.directive('showImg',{ 2 inserted(el){ 3 el.addEventListener('click',function(e){ 4 e.stopPropagation() 5 const imgSrc = el.getAttribute('src'); //获取当前的图片链接 6 let _showImg_ = document.getElementById('__showImg__') 7 if( _showImg_){ 8 _showImg_.style.display = 'flex'; 9 const childImg = _showImg_.childNodes[0] 10 childImg.setAttribute('src',imgSrc) 11 }else{ 12 _showImg_ = document.createElement('div'); 13 const body = document.body 14 _showImg_.innerHTML = `<img src="${imgSrc}" style="max-width: 100%;" />` 15 _showImg_.setAttribute('id','__showImg__'); 16 _showImg_.setAttribute('style','display: flex;justify-content: center;align-items:center;position:fixed;z-index:1000;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.7);'); 17 body.appendChild(_showImg_); 18 19 _showImg_.addEventListener('click',function(e){ 20 e.stopPropagation(); 21 this.style.display = 'none' 22 }) 23 } 24 }) 25 } 26 })