feat(ui/uploader): support remove button slot (#1835)

* feat(ui/uploader): support remove button slot * docs(ui/uploader): add remove button slot example * docs(ui/uploader): add version
varletjs · Dec 25, 2024 · 859701d · 859701d
1 parent f611882
commit 859701d
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 4 deletions.
diff --git a/packages/varlet-ui/src/uploader/Uploader.vue b/packages/varlet-ui/src/uploader/Uploader.vue
@@ -9,9 +9,19 @@
         @click="preview(f)"
       >
         <div :class="n('file-name')">{{ f.name || f.url }}</div>
-        <div :class="n('file-close')" v-if="removable" @click.stop="handleRemove(f)">
-          <var-icon :class="n('file-close-icon')" var-uploader-cover name="delete" />
-        </div>
+        <slot
+          name="remove-button"
+          v-if="removable"
+          :remove="
+            () => {
+              handleRemove(f)
+            }
+          "
+        >
+          <div :class="n('file-close')" @click.stop="handleRemove(f)">
+            <var-icon :class="n('file-close-icon')" var-uploader-cover name="delete" />
+          </div>
+        </slot>
         <img
           role="img"
           :class="n('file-cover')"

diff --git 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
@@ -511,6 +549,7 @@ const files = ref([
 | --- | --- | --- |
 | `default` | Upload action content | `-` |
 | `extra-message` | Extra message | `-` |
+| `remove-button` ***3.8.0*** | Remove button | `remove: () => void` |
 
 ### Style Variables
 

diff --git 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
 
 ### 属性
@@ -510,6 +548,7 @@ const files = ref([
 | --- | --- | --- |
 | `default` | 上传按钮内容 | `-` |
 | `extra-message` | 附加信息 | `-` |
+| `remove-button` ***3.8.0*** | 删除按钮 | `remove: () => void` |
 
 ### 样式变量
 

diff --git 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
@@ -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
@@ -23,4 +23,5 @@ export default {
   useProgress: '使用进度条',
   beforeFilter: '文件列表过滤',
   clickAction: '上传按钮点击事件',
+  removeButtonSlot: '自定义删除按钮',
 }
diff --git a/packages/varlet-ui/types/uploader.d.ts b/packages/varlet-ui/types/uploader.d.ts
@@ -67,6 +67,7 @@ export class Uploader extends VarComponent {
   $slots: {
     default(): VNode[]
     'extra-message'(): VNode[]
+    'remove-button'(remove: () => void): VNode[]
   }
 
   getLoading(): VarFile[]