vue--点击图片放大的自定义指令（低级版）

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

 

转载于:https://www.cnblogs.com/carrotWu/p/9088283.html