如何自定义Naive UI中list-type为image-card的NUpload组件删除图标

当NUpload设置list-type="image-card"时，file-list插槽会被组件内部的图片卡片逻辑忽略，官方提供的可行方案是使用**#image-card-file插槽**来自定义单张图片卡片的完整渲染，包括替换删除图标。

方法一：使用image-card-file插槽自定义删除图标 #

通过这个插槽可以完全控制图片卡片的结构，替换默认的删除图标为Font Awesome图标或自定义SVG组件。修改后的代码示例如下：

<template>
  <div class="upload-avatar">
    <NUpload
      action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
      list-type="image-card"
      :default-file-list="defaultFileList"
      :max="1"
      @remove="handleRemove"
      @change="handleChange"
    >
      <!-- 上传拖拽区域 -->
      <NUploadDragger>
        <div>
          <i class="fa fa-upload icon"></i>
        </div>
        <div class="text-center">
          <p>Click or drag to upload</p>
        </div>
      </NUploadDragger>

      <!-- 自定义image-card文件项 -->
      <template #image-card-file="{ file, handleRemove }">
        <div class="naive-image-card">
          <!-- 预览图片 -->
          <img :src="file.url" alt="" class="image-card-img" />
          <!-- 操作层 -->
          <div class="image-card-mask">
            <!-- 替换为Font Awesome删除图标 -->
            <button class="image-card-btn" @click="handleRemove(file)">
              <i class="fa fa-trash"></i>
            </button>
          </div>
        </div>
      </template>
    </NUpload>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { NUpload, NUploadDragger, type UploadFileInfo } from 'naive-ui'

const defaultFileList = ref<UploadFileInfo[]>([
  {
    id: 'example-file',
    name: 'example.png',
    status: 'finished',
    url: 'https://via.placeholder.com/300'
  }
])

const handleChange = (data: { fileList: UploadFileInfo[] }) => {
  console.log(data.fileList)
}

const handleRemove = (file: UploadFileInfo) => {
  console.log('删除文件:', file)
}
</script>

<style lang="scss" scoped>
.upload-avatar {
  width: 200px;
  height: 200px;
}
.icon {
  font-size: 48px;
  color: #ccc;
}

/* 自定义image-card样式，对齐默认样式 */
.naive-image-card {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}
.image-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-card-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.naive-image-card:hover .image-card-mask {
  opacity: 1;
}
.image-card-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
</style>

说明： #

• 插槽参数file包含当前文件的信息，handleRemove是组件内置的删除方法，调用它即可触发删除逻辑。
• 可以将<i class="fa fa-trash"></i>替换为你的自定义SVG组件，比如：

  <svg class="custom-delete-icon" viewBox="0 0 24 24">
    <!-- 你的SVG路径代码 -->
  </svg>
  

方法二：全局替换Naive UI的trash图标 #

如果需要在整个项目中统一替换Naive UI的删除图标，可以通过Naive UI的configProvider全局配置图标：

<template>
  <NConfigProvider :icons="customIcons">
    <!-- 你的项目根组件 -->
    <App />
  </NConfigProvider>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import { NConfigProvider } from 'naive-ui'
// 导入你的自定义图标（示例为Font Awesome图标组件）
import { FaTrash } from 'vue-fontawesome'

const customIcons = {
  // 替换Naive UI默认的trash图标
  trash: () => h(FaTrash)
}
</script>

这种方式会让所有使用Naive UI默认trash图标的组件（包括NUpload的删除按钮）都自动替换为你自定义的图标。

内容的提问来源于stack exchange，提问作者Enrique GF