多图预览组件封装

<template>
  <div v-show="show" id="swipper" class="layer">
    <div class="cycle">
      <div class="content" :style="state.changePic">
        <img
          v-show="imageUrl.length!==0"
          style="width: 800px;height: auto"
          v-for="(img_url, key) in imageUrl"
          :key="key"
          ref="imgs"
          :src="img_url"
          alt="这是图片预览"
        />
        <img
          v-show="imageUrl.length===0"
          style="width: 800px;height: auto"
          ref="imgs"
          src="demoData"
          alt="暂时没有图"
        />
      </div>

      <div class="btn">
        <div class="close pointer" @click="state.close">
          <el-icon style="width: 10px">
            <CloseBold/>
          </el-icon>
        </div>
        <div class="iconbtn left" @click="state.go(1)" href="#">
          <img src="/public/imgs/icons/left.png" alt="">
        </div>
        <div class="iconbtn right" @click="state.go(-1)" href="#">
          <img src="/public/imgs/icons/right.png" alt="">
        </div>
      </div>

      <div class="bottom">
        <span
          v-for="(li, key) in imageUrl"
          :key="key"
          :class="{ active: key === state.index }"
        >
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import {computed, defineComponent, reactive} from "vue";

export default defineComponent({
  name: "previewImage",
  props: {
    imageUrl: {
      type: Array,
      default: [],
    },
    show: {
      type: Boolean,
      default: true,
    },
  },
  emits: ['hide'],
  setup(props, {emit}) {

    let state = reactive({
      index: 0, //现在是第几张
      width: 0, //移动的长度
      changePic:computed(()=>{
        return {
          transform: `translate3d(${state.width}px, 0, 0)`, //主要实现核心
          width:props.imageUrl.length!==0?props.imageUrl.length*800+'px':'800px',

        };
      }),
      close() {
        emit('hide')
      },

      go(direc) {
        console.log(direc);
        if (direc == -1) {
          state.index = state.index >= props.imageUrl.length - 1 ? 0 : state.index + 1;
        } else if (direc == 1) {
          state.index = state.index <= 0 ? props.imageUrl.length - 1 : state.index - 1;
        }
        console.log("index:", state.index);
        state.move(); //移动
      },
      move() {
        state.width = -800 * state.index;
        console.log("width:", state.width);
      },
    })

    return {
      state,
    };
  },
})


</script>

<style lang="less" scoped>
#swipper{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .cycle {
    width: 800px;
    height: 670px;
    position: relative;
    top: 0;
    left: 0;
    margin: 0 auto;
    z-index: 10;
    overflow: hidden;
    .content {
      display: flex;
      width: 1600px;
      height: 100%;
      transition: 0.5s ease;
      background: #333;
      img {
        width: 800px;
        border-radius: 10px;
      }
    }
    .bottom {
      position: absolute;
      bottom: 10px;
      display: inline-block;
      transform: translateX(50%);
      right: 50%;
      span {
        width: 14px;
        height: 14px;
        border-radius: 7px;
        background-color: rgba(110, 102, 102, 0.849);
        opacity: 0.4;
        margin: 10px;
        display: inline-block;
        /* span是行内元素 */
      }
      /* 圆圈圈激活后*/
      .active {
        /*数值分别是：水平偏移，上下偏移，模糊，大小，颜色 */
        box-shadow: 0px 0px 2px 2px #53a8ff;
        background-color: #a0cfff !important;
        opacity: 0.6;
      }
    }
    .btn{
      .close {
        position: absolute;
        right: 10px;
        width: 16px;
        height: 16px;
        background-color: #789d9e;
        color: #fff;
        border-radius: 50%;
        top: 10px;
        line-height: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .iconbtn {
        width: 40px;
        height: 80px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.5;
        text-align: center;
      }
      .right {
        right: 0px;
        width:40px;
        height: 80px;
      }
      .left {
        left: 0px;
      }
    }
  }
}
</style>