<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>