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

 

posted @ 2018-05-25 14:10  carrot萝卜  阅读(629)  评论(0)    收藏  举报