vue3案例3

<template>
  <div class="app-page">
    <ul class="img-ul">
      <li
        class="img-li"
        v-for="img in imgs"
        :key="img.id"
        @click="onClick(img)"
      >
        <div :class="img.select && 'img-wrap'">
          <div class="img-box">
            <img class="img" :src="img.src" alt="" />
            <span class="img-name">{{ img.name }}</span>
          </div>
          <img
            :class="img.select ? 'img-select' : 'img-none'"
            src="./assets/images/dh.png"
          />
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
const imgs = reactive([
  {
    id: 1,
    src: new URL("./assets/images/img-1.jpg", import.meta.url).href,
    name: "图片1",
  },
  {
    id: 2,
    src: new URL("./assets/images/img-2.jpg", import.meta.url).href,
    name: "图片2",
  },
  {
    id: 3,
    src: new URL("./assets/images/img-3.jpg", import.meta.url).href,
    name: "图片3",
  },
  {
    id: 4,
    src: new URL("./assets/images/img-4.jpg", import.meta.url).href,
    name: "图片4",
  },
  {
    id: 5,
    src: new URL("./assets/images/img-5.jpg", import.meta.url).href,
    name: "图片5",
  },
  {
    id: 6,
    src: new URL("./assets/images/img-6.jpg", import.meta.url).href,
    name: "图片6",
  },
  {
    id: 7,
    src: new URL("./assets/images/img-7.jpg", import.meta.url).href,
    name: "图片7",
  },
  {
    id: 8,
    src: new URL("./assets/images/img-8.jpg", import.meta.url).href,
    name: "图片8",
  },
  {
    id: 9,
    src: new URL("./assets/images/img-9.jpg", import.meta.url).href,
    name: "图片9",
  },
]);
let selectImgs = reactive([]);

const onClick = (item) => {
  imgs.forEach((el) => {
    Object.assign(el, { select: false });
  });
  imgs.forEach((el) => {
    if (el.id == item.id) {
      el.select = true;
    }
  });
  selectImgs.push(item);
  console.log(selectImgs);
};
</script>



<style scoped>
.img-ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.img-ul > .img-li {
  list-style: none;
  width: 40%;
  margin: 10px;
  box-sizing: border-box;
  text-align: center;
}

.img-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.img {
  display: block;
  height: 200px;
  border: 1px solid #000;
}
.img-name {
  display: block;
  padding: 5px;
}

.img-wrap {
  position: relative;
  border: 1px solid #4b69c6;
  padding: 10px;
}
.img-select {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
}
.img-none {
  display: none;
}
</style>