docs(ui/uploader): add remove button slot example

varletjs · Dec 25, 2024 · 9958ac7 · 9958ac7
1 parent 1fb3faa
commit 9958ac7
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 1 deletion.
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

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
 
 ### 属性

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: '自定义删除按钮',
 }