order-ui-pc/src/views/goodStore/goods/imgShow.vue

<template>
  <el-dialog
    :title="title"
    :center="true"
    align="left"
    top="8vh"
    width="600px"
    @close="closeModel"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
  >
    <el-card>
      <el-row :gutter="10" >
        <el-col :span="24">
          <img class="activeImg" :src="activeImg" alt="" />
        </el-col>
        <el-col :span="24" style="text-align: right;padding-top:10px"  v-if="imgList&&imgList.length>0">
          <div class="img-box">
            <img
              @click="initForm(i)"
              :class="{ active: activeIndex === i }"
              v-for="(img, i) in imgList"
              :key="'imgboxitem' + i"
              :src="img"
              alt=""
            />
          </div>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
   <script>
export default {
  name: "goods",
  props: ["showModel", "imgList", "index"],
  data() {
    return {
      activeImg: "",
      activeIndex: this.index,
      showModelThis: this.showModel,
    };
  },
  methods: {
    closeModel() {
      this.showModelThis = false;
    },
    initForm(index) {
      this.activeIndex = index;
      this.activeImg = this.imgList[index];
    },
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm(this.index);
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
};
</script>

   <style lang="scss" scoped>
.goods {
  .activeImg {
    display: inline-block;
    width: 100%;
  }
  .img-box {
    img {
      width: 40px;
      height: 40px;
      display: inline-block;
      margin: 0 3px;
      border:1px solid transparent;
      &.active {
        border: 1px solid red;
      }
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>