FE-V2-PC/src/components/lookImgDialog/lookImgDialog.vue

<!--照片浏览DIALOG-->
<!--
        <lookImgDialog ref="lookImgDialog"></lookImgDialog>
  import lookImgDialog from '/@/components/lookImgDialog/lookImgDialog.vue'
        components: {
          lookImgDialog
        },
        /*
          传入3个参数(1,list,index)
          1-开启
          list-图片数据 [{url:"xxxxx"}]
          index-默认显示第几张图片
        */
        this.$refs.lookImgDialog.lookImgDialogOpen(1,list,index);
-->
<template>
  <el-dialog class="look-img-dialog" :title="lookImgDialogTitle" :visible.sync="lookImgDialogType" v-if="lookImgDialogType" width="1070px" height="700" append-to-body>
    <div class="look-img-dialog-min scrollbar-box">
      <img style="width:1026px;" :src="lookImgList[lookImgIndex].url">
    </div>
    <p class="el-icon-arrow-left left-i-button" @click="infoLeftButton"></p>
    <p class="el-icon-arrow-right right-i-button" @click="infoRightButton"></p>
    <p class="look-img-dialog-bottom-text">{{lookImgIndex+1}} / {{lookImgList.length}}</p>
  </el-dialog>
</template>

<script>
  export default {
    name: 'lookImgDialog',
    data(){
      return{
        lookImgDialogTitle:"",
        lookImgDialogType:false,
        lookImgList:[],
        lookImgIndex:null,
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      lookImgDialogOpen(type,list,index,title){
        if(type == 1){
          this.$set(this,'lookImgList',list);
          this.$set(this,'lookImgIndex',index?index:0);
          this.$set(this,'lookImgDialogTitle',title?title:'照片');
          this.$set(this,'lookImgDialogType',true);
        }else if(type == 2){
          this.$set(this,'lookImgDialogType',false);
        }
      },
      infoLeftButton(){
        if (this.lookImgIndex == 0){
          this.msgError('当前是第一张')
        }else{
          this.lookImgIndex--
        }
      },
      infoRightButton(){
        if (this.lookImgIndex == this.lookImgList.length-1){
          this.msgError('当前是最后一张')
        }else{
          this.lookImgIndex++
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .look-img-dialog{
    .left-i-button{
      cursor: pointer;
      text-align: center;
      line-height:30px;
      color:#fff;
      font-size:16px;
      top:350px;
      left:40px;
      position: absolute;
      width:30px;
      height:30px;
      background-color: #0045AF;
      border-radius:50%;
    }
    .right-i-button{
      cursor: pointer;
      text-align: center;
      line-height:30px;
      color:#fff;
      font-size:16px;
      position: absolute;
      top:350px;
      right:40px;
      width:30px;
      height:30px;
      background-color: #0045AF;
      border-radius:50%;
    }
    .right-i-button:hover{
      background-color: #0183fa;
    }
    .left-i-button:hover{
      background-color: #0183fa;
    }
    .look-img-dialog-bottom-text{
      text-align: center;
      line-height: 30px;
      font-size:16px;
      position: absolute;
      bottom:0;
      width:1026px;
    }
    .look-img-dialog-min{
      height:560px;
    }
  }
</style>