From 9958ac7e3060a18e55a793ceb0085dfeef1bb9d5 Mon Sep 17 00:00:00 2001
From: chouchouji <1305974212@qq.com>
Date: Wed, 25 Dec 2024 11:23:16 +0800
Subject: [PATCH] docs(ui/uploader): add remove button slot example

---
 packages/varlet-ui/src/uploader/docs/en-US.md | 38 +++++++++++++++++++
 packages/varlet-ui/src/uploader/docs/zh-CN.md | 38 +++++++++++++++++++
 .../varlet-ui/src/uploader/example/index.vue  | 16 +++++++-
 .../src/uploader/example/locale/en-US.ts      |  1 +
 .../src/uploader/example/locale/zh-CN.ts      |  1 +
 5 files changed, 93 insertions(+), 1 deletion(-)

diff --git a/packages/varlet-ui/src/uploader/docs/en-US.md b/packages/varlet-ui/src/uploader/docs/en-US.md
index e285c5f24a3..a0bf44048fe 100644
--- a/packages/varlet-ui/src/uploader/docs/en-US.md
+++ b/packages/varlet-ui/src/uploader/docs/en-US.md
@@ -435,6 +435,44 @@ const files = ref([
 </style>
 ```
 
+### Custom Remove Button
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const files = ref([
+  {
+    url: 'https://varletjs.org/cat.jpg',
+    cover: 'https://varletjs.org/cat.jpg'
+  },
+  {
+    url: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4',
+    cover: 'https://varletjs.org/cover.jpg'
+  }
+])
+</script>
+
+<template>
+  <var-uploader v-model="files">
+    <template #remove-button="{ remove }">
+      <div class="custom-remove-button">
+        <var-icon color="#fff" name="window-close" @click.stop="remove"></var-icon>
+      </div>
+    </template>
+  </var-uploader>
+</template>
+
+<style>
+.custom-remove-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+}
+</style>
+```
+
 ## API
 
 ### Props
diff --git a/packages/varlet-ui/src/uploader/docs/zh-CN.md b/packages/varlet-ui/src/uploader/docs/zh-CN.md
index d9126aee2e8..67514d4318f 100644
--- a/packages/varlet-ui/src/uploader/docs/zh-CN.md
+++ b/packages/varlet-ui/src/uploader/docs/zh-CN.md
@@ -434,6 +434,44 @@ const files = ref([
 </style>
 ```
 
+### 自定义删除按钮
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const files = ref([
+  {
+    url: 'https://varletjs.org/cat.jpg',
+    cover: 'https://varletjs.org/cat.jpg'
+  },
+  {
+    url: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4',
+    cover: 'https://varletjs.org/cover.jpg'
+  }
+])
+</script>
+
+<template>
+  <var-uploader v-model="files">
+    <template #remove-button="{ remove }">
+      <div class="custom-remove-button">
+        <var-icon color="#fff" name="window-close" @click.stop="remove"></var-icon>
+      </div>
+    </template>
+  </var-uploader>
+</template>
+
+<style>
+.custom-remove-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+}
+</style>
+```
+
 ## API
 
 ### 属性
diff --git a/packages/varlet-ui/src/uploader/example/index.vue b/packages/varlet-ui/src/uploader/example/index.vue
index 659537cdcdd..ca703a3711a 100644
--- a/packages/varlet-ui/src/uploader/example/index.vue
+++ b/packages/varlet-ui/src/uploader/example/index.vue
@@ -220,7 +220,14 @@ function handleActionClick(chooseFile) {
     </var-uploader>
   </var-space>
 
-  <var-space></var-space>
+  <app-type>{{ t('removeButtonSlot') }}</app-type>
+  <var-uploader v-model="values.files2">
+    <template #remove-button="{ remove }">
+      <div class="custom-remove-button">
+        <var-icon color="#fff" name="window-close" @click.stop="remove"></var-icon>
+      </div>
+    </template>
+  </var-uploader>
 </template>
 
 <style scoped lang="less">
@@ -235,4 +242,11 @@ function handleActionClick(chooseFile) {
   font-size: 12px;
   object-fit: cover;
 }
+
+.custom-remove-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+}
 </style>
diff --git a/packages/varlet-ui/src/uploader/example/locale/en-US.ts b/packages/varlet-ui/src/uploader/example/locale/en-US.ts
index f539e4a1c05..92ec117dbc9 100644
--- a/packages/varlet-ui/src/uploader/example/locale/en-US.ts
+++ b/packages/varlet-ui/src/uploader/example/locale/en-US.ts
@@ -23,4 +23,5 @@ export default {
   useProgress: 'Use Progress',
   beforeFilter: 'File List Filter',
   clickAction: 'Upload Button Click Event',
+  removeButtonSlot: 'Custom Remove Button',
 }
diff --git a/packages/varlet-ui/src/uploader/example/locale/zh-CN.ts b/packages/varlet-ui/src/uploader/example/locale/zh-CN.ts
index eae8e1b5329..d171eb7d53c 100644
--- a/packages/varlet-ui/src/uploader/example/locale/zh-CN.ts
+++ b/packages/varlet-ui/src/uploader/example/locale/zh-CN.ts
@@ -23,4 +23,5 @@ export default {
   useProgress: '使用进度条',
   beforeFilter: '文件列表过滤',
   clickAction: '上传按钮点击事件',
+  removeButtonSlot: '自定义删除按钮',
 }