根据element-ui组件库的查看图片组件

由于项目需要，用户需要能够点击表格中的图片对图片进行相应的放大查看并且能够进行图片的下载以及左右切换（甚至还有旋转）；

  1 <template>
  2     <div>
  3         <i class="iconfont icon-guanbi_ icon_imgclose" @click="handelcloseimg" v-if="showbigimg"></i>
  4         <el-dialog
  5           title=""
  6           :visible.sync="showbigimg"
  7           width="740px"
  8           top="0px"
  9           :close-on-click-modal="false"
 10           :show-close="false"
 11           :lock-scroll='true'
 12           class="lunbo_bg">
 13             <div class="bigimg_bg" tabindex = "0" id="imgdia">
 14                 <el-carousel arrow="always" class="lunbo" indicator-position="none" :autoplay='false' height="435px" ref="lunboitem" @change="changeimg" :loop='false'>
 15                     <el-carousel-item v-for="(item,index) in urlList" :key="item.url" :name='item.url' >
 16                         <div style="width:580px;height:435px;text-align: center;margin-left: 80px;margin-right: 80px;">
 17                            <img :src="item.url" class="img_item">
 18                         </div>
 19                         <div class="img_name">{{item.attachName}}</div>
 20                     </el-carousel-item>
 21                 </el-carousel>
 22                 <div class="img_beatch">
 23                     <i class="iconfont icon-shangyizhang titicon1" @click="golastnew">
 24                         <span class="tit_name1">上一张</span>
 25                     </i>
 26                     <i class="iconfont icon-xiayizhang titicon2" @click="gonextnew">
 27                         <span class="tit_name2">下一张</span>
 28                     </i>
 29                     <i class="iconfont icon-xiazai titicon3" @click="downloadimg">
 30                         <span class="tit_name3">下载</span>
 31                     </i>
 32                 </div>
 33             </div>
 34         </el-dialog>
 35     </div>
 36 </template>
 37 <script>
 38     import utils from '@/assets/script/utils.js';
 39     export default {
 40         name: "bigImgDialog",
 41         props: ['showbigimg','urlList','nowurl'],
 42         data() {
 43             return {
 44                 showimg:false,
 45                 downloadurl:'',
 46                 nowimg:'',//组件内传入当前图片的链接
 52             }
 53         },
 54         watch:{
 55             'showbigimg'(val){
 56                 if(val==true){
 57                     setTimeout(function(){
 58                         document.getElementById('imgdia').focus();
 59                     },30)
 60                 }
 61             },
 62             'nowurl'(val){
 63                 if(val){
 64                     let that=this;
 65                     setTimeout(function(){
 66                         that.$refs.lunboitem.setActiveItem(val.url);
 67                     },30)
 68                 }
 69             }
 70         },
 71         methods: {
 72             changeimg(aa,bb){
 73                 this.nowimg=aa;
 74                 this.downloadurl=this.urlList[aa].url;
 75             },
 76             handelcloseimg(){
 77                 this.$emit('closeimg')
 78                 // this.showbigimg=false;
 79             },
 80             downloadimg(){
 81                 // var alink = document.createElement("a");
 82                 // alink.href = this.downloadurl;
 83                 // alink.download = 'img.png';
 84                 // alink.click();
 85                 // utils.open(encodeURI("/common/downloadFile?url=" + this.downloadurl), true)
 86                 window.open(basepath + '/downloadApi/downloadFile?url='+this.downloadurl);
 87             },
 88             golastnew(){
 89                 // this.$refs.lunboitem.prev()
 90                 if(this.nowimg==0){
 91                     utils.message('当前为第一张','warning')
 92                 }else{
 93                   this.$refs.lunboitem.prev()  
 94                 }
 95             },
 96             gonextnew(){ 
 97                 // this.$refs.lunboitem.next()
 98                 if(this.nowimg==this.urlList.length-1){
 99                     utils.message('当前为最后一张','warning')
100                 }else{
101                     this.$refs.lunboitem.next()
102                 }
103             },
104             
105         },
106         created: function() {
107             var that = this;
108             document.onkeydown = function(e) {
109                 let key = window.event.keyCode;
110                 if(that.showbigimg){
111                     if (key == 37) {
112                         that.golastnew();
113                     }
114                     if(key==39){
115                         that.gonextnew();
116                     } 
117                 }
118                 
119             };
120         },
121         mounted: function () {
122            
123         },
124         components: {
125             
126         }
127     }
128 </script>
129 <style>
130      .bigimg_bgall{
131         /* position: relative; */
132         width: 100%;
133         height: 100%;
134         z-index:998;
135         position: fixed;
136         top: 0;
137         left: 0;
138         right: 0;
139         bottom: 0;
140         background: rgba(0,0,0,0.5);
141     }
142     .bigimg_bg{
143         outline:none;
144     }
145      .icon_imgclose{
146         cursor: pointer;
147         font-size: 44px;
148         color: #9BA3AF!important;
149         font-weight: 100;
150         position: fixed;
151         top:12px;
152         right: 40px;
153         z-index: 99999;
154     }
155      .lunbo .el-carousel__arrow{
156         background-color:rgba(0,0,0,0);
157     }
158      .lunbo .el-carousel__arrow .el-icon-arrow-left{
159         font-size: 50px;
160     }
161      .lunbo .el-carousel__arrow .el-icon-arrow-right{
162         font-size: 50px;
163     }
164      .lunbo .el-carousel__arrow--left{
165         position: absolute;
166         /* left: -20px; */
167         left: 0;
168         top: 50%;
169     }
170      .lunbo .el-carousel__arrow--right{
171         position: absolute;
172         /* left: -20px; */
173         /* left: 0; */
174         right: 16px;
175         top: 50%;
176     }
177      .lunbo_bg .img_item{
178         width: 100%;
179         height: 100%;
180         border-radius: 5px;
181     }
182      .lunbo_bg .img_beatch{
183         position: relative;
184         width: 240px;
185         height:50px;
186         text-align: center;
187         /* margin: 30px auto; */
188         margin: 10px auto;
189         background:#9BA3AF;
190         z-index: 99999;
191         border-radius: 30px;
192     }
193      .lunbo_bg .img_beatch .titicon1{
194         display: inline-block;
195         position: relative;
196         font-size: 24px;
197         margin-right: 44px;
198         line-height: 50px;
199         color: #354052!important;
200         cursor: pointer;
201     }
202      .lunbo_bg .img_beatch .titicon1:hover .tit_name1{
203         display: inline-block;
204     }
205      .lunbo_bg .img_beatch .titicon2:hover .tit_name2{
206         display: inline-block;
207     }
208      .lunbo_bg .img_beatch .titicon3:hover .tit_name3{
209         display: inline-block;
210     }
211      .lunbo_bg .img_beatch .titicon2{
212         display: inline-block;
213         position: relative;
214         font-size: 24px;
215         margin-right: 44px;
216         line-height: 50px;
217         color: #354052!important;
218         cursor: pointer;
219     }
220      .lunbo_bg .img_beatch .titicon3{
221         display: inline-block;
222         position: relative;
223         font-size: 24px;
224         line-height: 50px;
225         color: #354052!important;
226         cursor: pointer;
227     }
228      .lunbo_bg .img_beatch i:hover{
229         color: #6F7E95!important;
230     }
231     .lunbo_bg .img_beatch .titname_bg{
232         text-align: center;
233     }
234      .lunbo_bg .img_beatch .tit_name1{
235         position: absolute;
236         top: 40px;
237         left: -13px;
238         color: #EBF1F5;
239         /* margin-right: 30px; */
240         font-size: 14px;
241         width: 50px;
242         height: 24px;
243         display: none;
244     }
245      .lunbo_bg .img_beatch .tit_name2{
246         position: absolute;
247         top: 40px;
248         left: -13px;
249         width: 50px;
250         height: 24px;
251         font-size: 14px;
252         color: #EBF1F5;
253         display: none;
254     }
255      .lunbo_bg .img_beatch .tit_name3{
256         position: absolute;
257         top: 40px;
258         left: -13px;
259         width: 50px;
260         height: 24px;
261         font-size: 14px;
262         color: #EBF1F5;
263         display: none;
264     }
265      .lunbo_bg .img_beatch a:hover{
266         color: #6F7E95!important;
267     }
268      .lunbo_bg .img_beatch .el-icon-arrow-left:before{
269         color: #6F7E95;
270     }
271      .lunbo_bg .img_beatch .el-icon-arrow-right:before{
272         color: #6F7E95;
273     }
274      .lunbo_bg .el-dialog{
275         background: rgba(0,0,0,0);
276         box-shadow: none;
277     }
278      .lunbo_bg .el-dialog__body{
279         padding: 0;
280         border: none;
281         background-color:rgba(0,0,0,0);
282     }
283      .lunbo_bg .el-dialog__header{
284         background-color:rgba(0,0,0,0)!important;
285     }
286     .lunbo_bg .el-dialog__body{
287         max-height: 900px!important;
288     }
289     .img_name{
290         position: absolute;
291         bottom: 0;
292         left: 80px;
293         width: 580px;
294         height: 56px;
295         line-height: 56px;
296         font-size: 14px;
297         color: #354052;
298         padding-left:25px; 
299         text-align: left;
300         background: rgba(235,241,245,0.8);
301         border-radius: 0 0 5px 5px;
302     }
303     
304 </style>

 

转载于:https://www.cnblogs.com/longflag/p/10972359.html