弹窗预览图片组件

<template>
  <div class="basePreview">
    <el-dialog
        :model-value="dialogVisible"
        width="1040px"
        :show-close="false"
        :before-close="dialogClose"
    >
      <div class="dialog-content">
        <div class="close" @click="dialogClose">
          <i class="iconfont icon-ziyuan18"></i>
        </div>
        <div class="nextPage" @click="nextPageChange">
          <i class="iconfont icon-next-icon"></i>
        </div>
        <div class="lastPage" @click="lastPageChange">
          <i class="iconfont icon-next-icon"></i>
        </div>
        <div class="img-container">
          <img :src="mainImage" alt="">
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-scrollbar style="width:900px;height:90px;margin:auto">
            <div class="img-list">
              <div class="img-item" :ref="imageItemRef" :class="{active:index == active}" v-for="(item,index) in previewList" :key="index"
                   @click="choosePreview(item,index)">
                <img :src="item" alt="">
              </div>
            </div>
          </el-scrollbar>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  ref,
  toRef,
  toRefs,
  reactive,
  watch,
  computed,
  onBeforeUpdate,
  onMounted,
  defineComponent,
} from 'vue'

export default defineComponent({
  name: 'BasePreview',
  props: {
    previewList: {
      type: Array,
      default: [],
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  emits: [],

  setup(props, context) {
    const mainImage = ref()
    const active = ref(0)
    mainImage.value = props.previewList[0]
    let itemRefs = []
    const imageItemRef = el => {
      if (el && itemRefs.length != props.previewList.length) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    function dialogClose() {
      context.emit('close')
    }

    function choosePreview(item, index) {
      mainImage.value = item
      active.value = index
      itemRefs[active.value].scrollIntoView({behavior:'smooth',block:'center',inline:'center'})
    }

    function nextPageChange() {
      if(active.value <= props.previewList.length - 2) {
        active.value = active.value + 1
        mainImage.value = props.previewList[active.value]
        itemRefs[active.value].scrollIntoView({behavior:'smooth',block:'center',inline:'center'})
      }
    }

    function lastPageChange() {
      if(active.value > 0) {
        active.value = active.value - 1
        mainImage.value = props.previewList[active.value]
        itemRefs[active.value].scrollIntoView({behavior:'smooth',block:'center',inline:'center'})
      }
    }

    onMounted(() => {


    });

    return {
      ...toRefs(props),
      mainImage,
      active,
      dialogClose,
      imageItemRef,
      nextPageChange,
      lastPageChange,
      choosePreview
    }
  },
})
</script>

<style lang="scss" scoped>

.basePreview {
  .dialog-content {
    position: relative;

    .close {
      cursor: pointer;
      position: absolute;
      right: -80px;
      top: -30px;
      width: 41px;
      line-height: 41px;
      text-align: center;
      height: 41px;
      background-color: #ffffff;
      border-radius: 3px;
    }
    .nextPage{
      cursor: pointer;
      position: absolute;
      right: -90px;
      top: 50%;
      color: #ffffff;
      .icon-next-icon{
        font-size: 36px;
      }
    }
    .lastPage{
      cursor: pointer;
      position: absolute;
      left: -90px;
      transform:rotate(180deg);
      top: 50%;
      color: #ffffff;
      .icon-next-icon{
        font-size: 36px;
      }
    }

    .img-container {
      width: 1000px;
      height: 519px;
      background-color: #c7c7c7;

      img {
        width: 1000px;
        height: 519px;
        object-fit: contain;
      }
    }

  }

  .dialog-footer {

    .img-list {
      display: flex;
      align-items: center;
      width: 900px;
      margin: auto;

      .img-item {
        margin-right: 20px;
        width: 82px;
        height: 82px;
        background-color: #f1f1f1;
        border: solid 1px transparent;
        cursor: pointer;

        &:last-child {
          margin-right: 0px;
        }

        &.active {
          border: solid 1px #ffa312;
        }

        img {
          width: 82px;
          height: 82px;
          object-fit: contain;
        }
      }
    }

  }
}


</style>