diff --git a/src/common/utils.wxs b/src/common/utils.wxs index 10c7ade3c..8b7259e4e 100644 --- a/src/common/utils.wxs +++ b/src/common/utils.wxs @@ -24,6 +24,10 @@ function isObject(obj) { return obj && obj.constructor === 'Object'; } +function isBoolean(value) { + return typeof value === 'boolean'; +} + var isNoEmptyObj = function (obj) { return isObject(obj) && JSON.stringify(obj) !== '{}'; }; @@ -135,6 +139,7 @@ module.exports = { isString: isString, isArray: isArray, isObject: isObject, + isBoolean: isBoolean, isNoEmptyObj: isNoEmptyObj, includes: includes, cls: cls, diff --git a/src/upload/README.en-US.md b/src/upload/README.en-US.md index 152c161e1..78103c230 100644 --- a/src/upload/README.en-US.md +++ b/src/upload/README.en-US.md @@ -8,6 +8,7 @@ name | type | default | description | required -- | -- | -- | -- | -- style | Object | - | CSS(Cascading Style Sheets) | N custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +add-btn | Boolean | true | \- | N add-content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N allow-upload-duplicate-file | Boolean | false | `暂不支持`。allow to upload duplicate name files | N config | Object | - | Typescript：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array; sourceType?: Array }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N @@ -20,6 +21,7 @@ gutter | Number | 16 | \- | N image-props | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N max | Number | 0 | max count of files limit | N media-type | Array | ['image', 'video'] | Typescript：`Array` `type MediaType = 'image' \| 'video'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N +remove-btn | Boolean | true | \- | N request-method | Function | - | \- | N size-limit | Number / Object | - | files size limit。Typescript：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N source | String | media | options: media/messageFile | N diff --git a/src/upload/README.md b/src/upload/README.md index 0b81817c4..f96b1da12 100644 --- a/src/upload/README.md +++ b/src/upload/README.md @@ -71,6 +71,7 @@ isComponent: true -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +add-btn | Boolean | true | 添加按钮 | N add-content | String / Slot | - | 添加按钮内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N allow-upload-duplicate-file | Boolean | false | `暂不支持`。是否允许重复上传相同文件名的文件 | N config | Object | - | 图片上传配置，视频上传配置，文件上传配置等，包含图片尺寸、图片来源、视频来源、视频拍摄最长时间等。更多细节查看小程序官网。[图片上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)。[视频上传](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html)。TS 类型：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array; sourceType?: Array }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array; compressed?: boolean; maxDuration?: number; camera?: 'back' \| 'front' }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N @@ -83,6 +84,7 @@ gutter | Number | 16 | 预览窗格的 `gutter` 大小，单位 rpx | N image-props | Object | - | 透传 Image 组件全部属性。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制 | N media-type | Array | ['image', 'video'] | 支持上传的文件类型，图片或视频。TS 类型：`Array` `type MediaType = 'image' \| 'video'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N +remove-btn | Boolean | true | 移除按钮 | N request-method | Function | - | 自定义上传方法 | N size-limit | Number / Object | - | 图片文件大小限制，默认单位 KB。可选单位有：`'B' \| 'KB' \| 'MB' \| 'GB'`。示例一：`1000`。示例二：`{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }`。TS 类型：`number \| SizeLimitObj` `interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }` `type SizeUnitArray = ['B', 'KB', 'MB', 'GB']` `type SizeUnit = SizeUnitArray[number]`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N source | String | media | 来源。可选项：media/messageFile | N diff --git a/src/upload/__test__/__snapshots__/demo.test.js.snap b/src/upload/__test__/__snapshots__/demo.test.js.snap index 5022494f8..0843596b0 100644 --- a/src/upload/__test__/__snapshots__/demo.test.js.snap +++ b/src/upload/__test__/__snapshots__/demo.test.js.snap @@ -102,16 +102,19 @@ exports[`Upload Upload multiple demo works fine 1`] = ` Array [ Object { "name": "uploaded1.png", + "removeBtn": true, "type": "image", "url": "https://tdesign.gtimg.com/mobile/demos/example4.png", }, Object { "name": "uploaded2.png", + "removeBtn": true, "type": "image", "url": "https://tdesign.gtimg.com/mobile/demos/example6.png", }, Object { "name": "uploaded3.png", + "removeBtn": true, "type": "image", "url": "https://tdesign.gtimg.com/mobile/demos/example5.png", }, @@ -130,6 +133,7 @@ exports[`Upload Upload multiple demo works fine 1`] = ` "image", ] }}" + removeBtn="{{false}}" bind:click="handleClick" bind:remove="handleRemove" bind:sort-end="handleSortEnd" diff --git a/src/upload/_example/multiple/index.js b/src/upload/_example/multiple/index.js index 736d74c59..658440bf5 100644 --- a/src/upload/_example/multiple/index.js +++ b/src/upload/_example/multiple/index.js @@ -5,16 +5,19 @@ Component({ url: 'https://tdesign.gtimg.com/mobile/demos/example4.png', name: 'uploaded1.png', type: 'image', + removeBtn: true, }, { url: 'https://tdesign.gtimg.com/mobile/demos/example6.png', name: 'uploaded2.png', type: 'image', + removeBtn: true, }, { url: 'https://tdesign.gtimg.com/mobile/demos/example5.png', name: 'uploaded3.png', type: 'image', + removeBtn: true, }, ], gridConfig: { diff --git a/src/upload/_example/multiple/index.wxml b/src/upload/_example/multiple/index.wxml index 8900227fa..bd2b164ce 100644 --- a/src/upload/_example/multiple/index.wxml +++ b/src/upload/_example/multiple/index.wxml @@ -4,6 +4,7 @@ media-type="{{['video','image']}}" files="{{originFiles}}" gridConfig="{{gridConfig}}" + removeBtn="{{false}}" bind:success="handleSuccess" bind:remove="handleRemove" bind:click="handleClick" diff --git a/src/upload/props.ts b/src/upload/props.ts index f75cf6c42..bc2bc4de9 100644 --- a/src/upload/props.ts +++ b/src/upload/props.ts @@ -6,6 +6,11 @@ import { TdUploadProps } from './type'; const props: TdUploadProps = { + /** 添加按钮 */ + addBtn: { + type: Boolean, + value: true, + }, /** 添加按钮内容 */ addContent: { type: String, @@ -60,6 +65,11 @@ const props: TdUploadProps = { type: Array, value: ['image', 'video'], }, + /** 移除按钮 */ + removeBtn: { + type: Boolean, + value: true, + }, /** 自定义上传方法 */ requestMethod: { type: null, diff --git a/src/upload/type.ts b/src/upload/type.ts index c0812d37e..f1d0d65fc 100644 --- a/src/upload/type.ts +++ b/src/upload/type.ts @@ -7,6 +7,14 @@ import { ImageProps } from '../image/index'; export interface TdUploadProps { + /** + * 添加按钮 + * @default true + */ + addBtn?: { + type: BooleanConstructor; + value?: boolean; + }; /** * 添加按钮内容 */ @@ -95,6 +103,14 @@ export interface TdUploadProps { type: ArrayConstructor; value?: Array; }; + /** + * 移除按钮 + * @default true + */ + removeBtn?: { + type: BooleanConstructor; + value?: boolean; + }; /** * 自定义上传方法 */ diff --git a/src/upload/upload.wxml b/src/upload/upload.wxml index 9272e74bb..c4656827d 100644 --- a/src/upload/upload.wxml +++ b/src/upload/upload.wxml @@ -29,7 +29,6 @@