发布文章（四）-封面组件-选中素材效果-覆盖图片元素的处理-伪元素选择器实现容器元素效果-图片no-repeat效果

本文详细介绍了在前端开发中如何实现图片选中效果，包括使用布尔类型数据标记选中状态，通过比较图片URL确定选中与否，以及利用CSS伪元素实现视觉上的选中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

06-发布文章-封面组件-选中素材效果

点击图片
- 选中当前图片
- 其他图片不选中
- 怎么选中：
  - 需要容器（遮罩，打钩图片，居中显示）

思考1：怎么才代表选中？

需要一个数据，标识当前图片是否选中，值布尔类型。
怎么得到数据的值，记录当前点击的图片唯一标识，和当前所有图片的ID进行比对，如果一致代表选中，反之不选中。
加上了 selected 类选中了。

src/components/my-image.vue中的div里-图片列表占位处

 //绑定点击图片事件，获取图片的地址作为唯一标识   地址一样加样式类
<div class="img_item" :class="{selected:item.url===selectedImageUrl}" @click="selectedImage(item.url)"

src/components/my-image.vue中的methods里

// 选中图片
    selectedImage (url) {
      this.selectedImageUrl = url  //给获取的图片地址重新赋值
      // 在遍历图片的时候，比对记录的URL
      // 如果一致  选中  不一致 不选中
    },

src/components/my-image.vue中的data里

// 记录点击图片的唯一标识（图片地址）
      selectedImageUrl: null

思考2：选中效果怎么实现？

怎么通过一个类，能够实现一个容器（元素）的效果？答案：（伪元素选择器）

//用来做覆盖的图片样式：img-list——>img-item的样式里面再加一个类

&.selected{
    //::after伪元素
      &::after{
        // .img_item.selected::after{} 解析后选择器
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;  //图片覆盖要定位，给子元素加
        top: 0;
        left: 0;
          //不平铺  居中  宽高都是50px
        background: rgba(0,0,0,0.2) url(../assets/images/selected.png) no-repeat center / 50px
      }
    }