@arco.design upload 已上传文件，点击删除 popconfirm 询问删除

在这里插入图片描述

实现

借助 upload 的两个属性 on-before-remove 和 custom-icon

custom-icon

官方给的例子是更换图标，这里借助 h 函数返回的 vnode

const getCustomIcon = () => {return {retryIcon: () => h(IconUpload),cancelIcon: () => h(IconClose),fileIcon: () => h(IconFileAudio),removeIcon: () => h(IconClose),errorIcon: () => h(IconFaceFrownFill),fileName: (file) => {return `文件名： ${file.name}`},};
};

在这里插入图片描述
既然是 vnode，那就好办了

<a-uploadv-model:file-list="uploadValue"...:custom-icon="getCustomIcon()"
><template #upload-button><a-button type="primary"><icon-upload />点击上传</a-button></template>
</a-upload>

import { h } from 'vue'
import { Popconfirm } from '@arco-design/web-vue'
import { IconDelete } from '@arco-design/web-vue/es/icon'const getCustomIcon = () => {return {removeIcon: () =>h(Popconfirm,{content: '是否要删除附件？',type: 'warning',onOk: () => {console.log('确认删除')},},{default: () => h(IconDelete),}),}
}

h 函数参数

function h(type: string | Component,props?: object | null,children?: Children | Slot | Slots
): VNode

试验下，发现此时我们点击删除按钮的时候还是会直接删除文件

原因是由于另一个属性 on-before-remove，需要我们做如下处理

<a-uploadv-model:file-list="uploadValue"...:custom-icon="getCustomIcon()"@before-remove="beforeRemove"
><template #upload-button><a-button type="primary"><icon-upload />点击上传</a-button></template>
</a-upload>

// 缓存要删除的文件
const cacheRemoveFile = ref()
const beforeRemove = (file) => {cacheRemoveFile.value = filereturn false
}

这里要缓存一下要删除的文件， Popconfirm onOk 的时候需要

完整代码：

<a-uploadv-model:file-list="uploadValue"...:custom-icon="getCustomIcon()"@before-remove="beforeRemove"
>...
</a-upload><script setup>
import { ref } from 'vue'
import { Popconfirm } from '@arco-design/web-vue'
import { IconDelete } from '@arco-design/web-vue/es/icon'
const getCustomIcon = () => {return {removeIcon: () =>h(Popconfirm,{content: '是否要删除附件？',type: 'warning',onOk: () => {let delFile = cacheRemoveFile.valuelet delIndex = uploadValue.value.findIndex((item) => item.uid == delFile.uid)if (delIndex >= 0) {// 真正删除文件uploadValue.value.splice(index, 1)}},},{default: () => h(IconDelete),}),}
}
// 缓存的待删除文件
const cacheRemoveFile = ref()
const beforeRemove = (file) => {cacheRemoveFile.value = filereturn false
}
</script>