Browse Source

feat(uploader): add delete-icon prop (#1841)

* feat(uploader): add delete-icon prop

* test(uploader): add a test for delete-icon prop

* docs(uploader): add delete-icon prop

* chore(uploader): inherit icon component API props
gyt95 3 years ago
parent
commit
9caa103bdb

+ 10 - 0
src/packages/__VUE/uploader/__tests__/index.spec.ts

@@ -266,3 +266,13 @@ test('multiFile upload filter max-size file', async () => {
   await sleep();
   // expect(wrapper.emitted<[File]>('oversize')![0]).toBeTruthy();
 });
+
+test('delete-icon prop', () => {
+  const wrapper = mount(Uploader, {
+    props: {
+      deleteIcon: 'dongdong'
+    }
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});

+ 1 - 1
src/packages/__VUE/uploader/doc.en-US.md

@@ -390,7 +390,7 @@ export default {
 | before-upload     | Hook before reading the file, return false to stop reading the file, can return Promise                                                          | Function                          | null             |
 | before-xhr-upload`v3.2.1` | Customize the method when uploading XHR                                                                                                                                                                          | Function(xhr,option)                          | null             |
 | before-delete     | Hook before delete the file, return false to stop reading the file, can return Promise                                                           | Function(file,fileList): boolean 丨Promise | -                |
-
+| delete-icon               | Customize the delete button by passing in [icon name](/#/en-US/component/icon) or an image link                                                                                                                                                   | String                            | "photograph"     |
 
 
 ### FileItem

+ 1 - 0
src/packages/__VUE/uploader/doc.md

@@ -390,6 +390,7 @@ export default {
 | before-upload             | 上传前的函数需要返回一个`Promise`对象                                                                                                                                                  | Function                          | null             |
 | before-xhr-upload`v3.2.1` | 执行 XHR 上传时,自定义方式                                                                                                                                                            | Function(xhr,option)             | null             |
 | before-delete             | 除文件时的回调,返回值为 false 时不移除。支持返回一个 `Promise` 对象,`Promise` 对象 resolve(false) 或 reject 时不移除                                                                 | Function(file,fileList): boolean 丨Promise | -                |
+| delete-icon               | 自定义删除按钮,可传入[图标名称](/#/zh-CN/component/icon)或图片链接                                                                                                                                                   | String                            | "photograph"     |
 
 > 注意:accept、capture 和 multiple 为浏览器 input 标签的原生属性,移动端各种机型对这些属性的支持程度有所差异,因此在不同机型和 WebView 下可能出现一些兼容性问题。
 

+ 1 - 1
src/packages/__VUE/uploader/doc.taro.md

@@ -255,7 +255,7 @@ setup() {
 | before-upload             | 上传前的函数需要返回一个`Promise`对象                                                                                  | Function                          | null                      |
 | before-xhr-upload`v3.2.1` | 执行 Taro.uploadFile 上传时,自定义方式                                                                                | Function(Taro.uploadFile,option) | null                      |
 | before-delete             | 除文件时的回调,返回值为 false 时不移除。支持返回一个 `Promise` 对象,`Promise` 对象 resolve(false) 或 reject 时不移除 | Function(file,fileList): boolean 丨Promise | -                         |
-
+| delete-icon               | 自定义删除按钮,可传入[图标名称](/#/zh-CN/component/icon)或图片链接                                                                                                                                                   | String                            | "photograph"     |
 
 
 ### FileItem

+ 8 - 1
src/packages/__VUE/uploader/index.taro.vue

@@ -16,7 +16,13 @@
           <nut-icon color="#fff" :name="item.status == 'error' ? 'failure' : 'loading'"></nut-icon>
           <view class="nut-uploader__preview__progress__msg">{{ item.message }}</view>
         </view>
-        <nut-icon v-if="isDeletable" @click="onDelete(item, index)" class="close" name="failure"></nut-icon>
+        <nut-icon
+          v-if="isDeletable"
+          v-bind="$attrs"
+          @click="onDelete(item, index)"
+          class="close"
+          :name="deleteIcon"
+        ></nut-icon>
         <img
           class="nut-uploader__preview-img__c"
           @click="fileItemClick(item)"
@@ -102,6 +108,7 @@ export default create({
     multiple: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
     autoUpload: { type: Boolean, default: true },
+    deleteIcon: { type: String, default: 'failure' },
     beforeUpload: {
       type: Function,
       default: null

+ 8 - 1
src/packages/__VUE/uploader/index.vue

@@ -36,7 +36,13 @@
           <nut-icon color="#fff" :name="item.status == 'error' ? 'failure' : 'loading'"></nut-icon>
           <view class="nut-uploader__preview__progress__msg">{{ item.message }}</view>
         </view>
-        <nut-icon v-if="isDeletable" @click="onDelete(item, index)" class="close" name="failure"></nut-icon>
+        <nut-icon
+          v-if="isDeletable"
+          v-bind="$attrs"
+          @click="onDelete(item, index)"
+          class="close"
+          :name="deleteIcon"
+        ></nut-icon>
         <img
           class="nut-uploader__preview-img__c"
           @click="fileItemClick(item)"
@@ -134,6 +140,7 @@ export default create({
     multiple: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     autoUpload: { type: Boolean, default: true },
+    deleteIcon: { type: String, default: 'failure' },
     beforeUpload: {
       type: Function,
       default: null