feat(ui/uploader): support remove button slot

varletjs · Dec 24, 2024 · a3bae4b · a3bae4b
1 parent 6dd2257
commit a3bae4b
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 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
@@ -511,6 +511,7 @@ const files = ref([
 | --- | --- | --- |
 | `default` | Upload action content | `-` |
 | `extra-message` | Extra message | `-` |
+| `remove-button` | 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
@@ -510,6 +510,7 @@ const files = ref([
 | --- | --- | --- |
 | `default` | 上传按钮内容 | `-` |
 | `extra-message` | 附加信息 | `-` |
+| `remove-button` | 删除按钮 | `remove: () => void` |
 
 ### 样式变量
 

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[]