pc_shop_site/components/imageList.vue

<template>
  <div class="wrap flex row">
    <i class="el-icon-arrow-left" @click="scroll(-1)"></i>
    <div class="list" ref="list">
      <el-image
      class="image" v-for="(item, index) of data" :key="index" :src="item.cdn_url" fit="cover"
        @click="handleViwer(index)"></el-image>
    </div>
    <i class="el-icon-arrow-right" @click="scroll(1)"></i>
    <ElImageViewer v-if="showViewer" :initial-index="currentPre" :on-close="closeViewer" :url-list="comImg" />
  </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

export default {
  components: { ElImageViewer },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    }
  },
  data() {
    return {
      currentPre: 0,
      showViewer: false,
    }
  },
  computed: {
    comImg() {
      return this.data.map(i => i.cdn_url);
    }
  },
  methods: {
    scroll(amount) {
      const list = this.$refs.list;
      list.scrollLeft += amount * list.clientWidth;
    },
    closeViewer() {
      this.showViewer = false;
    },
    handleViwer(i) {
      this.currentPre = i;
      this.showViewer = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  transition: padding 0.3s ease;
  &:hover i {
    opacity: 1;
  }
}

i {
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wrap .list {
  width: 330px;
  overflow-x: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
}

.image {
  width: 100px;
  height: 100px;
  margin-top: 10px;
  margin-right: 10px;
  cursor: pointer;
}</style>