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 })
