@arco.design upload 组件删除已上传文件增加tooltip二次询问

每天进步一点.

已于 2024-03-25 09:55:53 修改

阅读量505

点赞数 3

文章标签： vue.js 前端 javascript arco design

于 2024-03-25 09:54:50 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45152848/article/details/137004033

版权

效果图

在这里插入图片描述

实现

<template>
	<a-upload
	  // 其他的一些配置
	  v-model:file-list="uploadValue"
	  :custom-icon="getCustomIcon()"
	  @before-remove="beforeRemove"
	/>
</template>
<script setup lang="tsx">
// 此处需要引入 @arco.design 对应的组件
import { Popconfirm, Message } from '@arco-design/web-vue'
import { IconFile, IconDelete } from '@arco-design/web-vue/es/icon'
// 引入 h
import { ref, h } from 'vue'

// 上传的文件
const uploadValue = ref([])
const getCustomIcon = () => {
  return {
  	 // 替换 file 图标
    fileIcon: () => h(IconFile),
    // 替换 remove 图标
    removeIcon: () =>
      h(
        Popconfirm,
        {
          content: '是否要删除附件？',
          type: 'warning',
          onOk: () => {
          	// 获取缓存的文件
            let delFile = cacheRemoveFile.value
            // 获取上传文件的索引
            let delIndex = uploadValue.value.findIndex((item) => item.uid == delFile.uid)
            // 删除文件
            if (delIndex >= 0) {
				uploadValue.value.splice(delIndex, 1)
            }
          },
        },
        {
          default: () => h(IconDelete),
        }
      ),
  }
}
// 移除文件前触发钩子，将移除的文件缓存，且此处返回 promise 的 reject
const cacheRemoveFile = ref(null)
const beforeRemove = (file) => {
  cacheRemoveFile.value = file
  return new Promise((resolve, reject) => {
    reject()
  })
}
</script>