根据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>