问题一：伪元素添加垃圾桶小图标方法

先去阿里巴巴矢量图库输入delete挑选一个心仪的垃圾桶小图标，但是不要下载svg,因为svg图标放到伪元素中不方便改变大小和颜色，所以直接添加至项目并下载相关代码到项目文件中,相应文件如下:

iconfont.css
iconfont.js
iconfont.json
iconfont.ttf
iconfont.woff
iconfont.woff2

在需要的文件中引入iconfont.css文件
在伪元素css中添加如下属性:

// \e67e是在阿里巴巴矢量图库中可以查看到删除图标对应的代码为"&#xe67e;",直接复制过来去掉其他的内容即可，然后可以通过color和font-size改变相应的图标颜色和图标大小了
font-family: "iconfont";
content: "\e67e";  
color: red;
font-size: 25px;

问题二:如何做到点击伪元素能触发事件呢？

方案一：我们可以通过在父元素添加 pointer-events: none;属性来取消父元素的点击事件,然后伪元素添加 pointer-events: auto;覆盖父元素的 pointer-events: none;属性使得点击伪元素就能触发父元素的回调方法，而父元素原来的回调函数都会失效

方案二：通过子元素的冒泡事件：简而言之，就是点击子元素，但会触发父元素的方法.使用这种方法会同时触发父元素的原本的回调函数：

以下通过方案一解决问题:

// 以下为图片容器，需要加伪元素的标签为class=“item”的标签
    <div class="photo-container">
      <div class="item"  v-for="src in srcList" @click="handleClick(src)">
        <el-image :src="src" lazy="lazy">
          <div slot="placeholder" class="image-slot">
            <img src="/loading.gif" alt="">
          </div>
        </el-image>
      </div>
    </div>

// 以下为部分css片段
// 由于图片覆盖了整个div所以我将 pointer-events: none;属性绑定了图片上,pointer-events: none;绑定了伪元素这样点击图片就可以触发伪元素的点击效果了（此方法主要是我用来解决瀑布式布局下删除图片按钮及回调函数问题的，当然还有一些小瑕疵）
.item{
    margin-bottom: 10px;
    position: relative;
    .el-image{
      width: 100%;
      height: auto;
      position: relative;
      pointer-events: none;
    }
    &:hover{
      &:after{
        font-family: "iconfont";
        content: "\e67e";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        color: red;
        font-size: 40px;
        cursor: pointer;
        animation: move 100ms;
        pointer-events: all;
      }
      @keyframes move {
        0%{transform: translateY(100%)}
        100%{transform: translateY(0)}
      }
    }
  }

Q.E.D.