前端实现一个图标库功能

“我正在参加「掘金·启航计划」”

需求

实现一个图标库的组件如下图,要求可以上传svg和png格式图片,点击可选中,并在右上角显示删除图标可点击删除！

实现

开始想的用照片墙可以直接实现,但是并不行,最终用的如下方式实现:

1. 首先有一个弹窗
2. 弹窗内有一个上传组件,上传组件后放一个card卡片用来展示上传的图片。
3. 利用flex布局进行样式修改,这样布局就完成了
4. 当上传完成之后图片显示在卡片中
5. 点击图片可以选中,选中之后给卡片加上阴影来表示当前选中(默认选中第一个),点击确定将图片信息传递给父组件,完成图片选择
6. 点击删除会出提示,点击确定就删除图片,调取接口重新获取数据!

<el-dialog
  :close-on-click-modal="false" // 在空白处点击允许弹窗关闭
  title="图标库"
  :visible.sync="dialogVisible"
  width="40%"
  @open="open" // 弹窗打开的时候,可以去调接口获取数据
>
  <div>
    <el-upload
      name="upfile"
      accept=".png,.svg" // 再选择上传图片的弹窗中进行类型限制
      list-type="picture-card"
      :show-file-list="false"
      :action="upload.url" // 图片上传地址
      :data="upload.data"
      :on-success="onSuccess" // 上传成功调用接口获取数据,对图标库进行刷新
      :before-upload="beforeUpload" // 上传之前,可以对上传文件类型进行校验
    >
      <i class="el-icon-upload" />
    </el-upload>
    <el-card v-for="(item,index) in iconList" :key="index" :class="item.active?'':'none'">
      <el-button v-if="item.active" type="text"><i class="el-icon-close" /></el-button>
      <el-image :src="item.url" />
    </el-card>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitIcon">确 定</el-button>
  </span>
</el-dialog>

文件类型校验

// 文件类型校验
beforeUpload(file) {
  if (file.type !== 'image/png' && file.type !== 'image/svg+xml') {
    this.$message.warning('上传的图表仅支持SVG、PNG格式')
    return false
  }
}

上传组件样式修改(照片墙icon居中)

::v-deep .el-upload--picture-card {
  width:100px;
  height:100px;
  line-height: 100px;
  text-align: center;
  margin-right: 10px;
  margin-top: 10px;
}

遇到的问题

刚开始写的时候,其实没有删除功能,所以是自己在开发过程中觉得需要一个删除所以写的当鼠标移入card时显示当前card的删除按钮,移出时隐藏删除按钮。