Skip to content

Commit 78d2d49

Browse files
anlyyaoanlyyao
authored
feat(Upload): support addBtn and removeBtn props (#3605)
* feat(Upload): support addBtn and removeBtn props * feat(Upload): update demo * test: update snapshots
1 parent ff3c5cd commit 78d2d49

File tree

9 files changed

+62
-17
lines changed

9 files changed

+62
-17
lines changed

‎src/common/utils.wxs

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ function isObject(obj) {
2424
return obj && obj.constructor === 'Object';
2525
}
2626

27+
function isBoolean(value) {
28+
return typeof value === 'boolean';
29+
}
30+
2731
var isNoEmptyObj = function (obj) {
2832
return isObject(obj) && JSON.stringify(obj) !== '{}';
2933
};
@@ -135,6 +139,7 @@ module.exports = {
135139
isString: isString,
136140
isArray: isArray,
137141
isObject: isObject,
142+
isBoolean: isBoolean,
138143
isNoEmptyObj: isNoEmptyObj,
139144
includes: includes,
140145
cls: cls,

‎src/upload/README.en-US.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ name | type | default | description | required
88
-- | -- | -- | -- | --
99
style | Object | - | CSS(Cascading Style Sheets) | N
1010
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
11+
add-btn | Boolean | true | \- | N
1112
add-content | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
1213
allow-upload-duplicate-file | Boolean | false | `暂不支持`。allow to upload duplicate name files | N
1314
config | Object | - | Typescript：`UploadMpConfig` `type UploadMpConfig = ImageConfig \| VideoConfig` `interface ImageConfig { count?: number; sizeType?: Array<SizeTypeValues>; sourceType?: Array<SourceTypeValues> }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array<SourceTypeValues>; 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
2021
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
2122
max | Number | 0 | max count of files limit | N
2223
media-type | Array | ['image', 'video'] | Typescript：`Array<MediaType>` `type MediaType = 'image' \| 'video'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
24+
remove-btn | Boolean | true | \- | N
2325
request-method | Function | - | \- | N
2426
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
2527
source | String | media | options: media/messageFile | N

‎src/upload/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ isComponent: true
7171
-- | -- | -- | -- | --
7272
style | Object | - | 样式 | N
7373
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
74+
add-btn | Boolean | true | 添加按钮 | N
7475
add-content | String / Slot | - | 添加按钮内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
7576
allow-upload-duplicate-file | Boolean | false | `暂不支持`。是否允许重复上传相同文件名的文件 | N
7677
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<SizeTypeValues>; sourceType?: Array<SourceTypeValues> }` `type SizeTypeValues = 'original' \| 'compressed'` `type SourceTypeValues = 'album' \| 'camera'` `interface VideoConfig { sourceType?: Array<SourceTypeValues>; 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
8384
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
8485
max | Number | 0 | 用于控制文件上传数量，值为 0 则不限制 | N
8586
media-type | Array | ['image', 'video'] | 支持上传的文件类型，图片或视频。TS 类型：`Array<MediaType>` `type MediaType = 'image' \| 'video'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/upload/type.ts) | N
87+
remove-btn | Boolean | true | 移除按钮 | N
8688
request-method | Function | - | 自定义上传方法 | N
8789
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
8890
source | String | media | 来源。可选项：media/messageFile | N

‎src/upload/__test__/__snapshots__/demo.test.js.snap

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,16 +102,19 @@ exports[`Upload Upload multiple demo works fine 1`] = `
102102
Array [
103103
Object {
104104
"name": "uploaded1.png",
105+
"removeBtn": true,
105106
"type": "image",
106107
"url": "https://tdesign.gtimg.com/mobile/demos/example4.png",
107108
},
108109
Object {
109110
"name": "uploaded2.png",
111+
"removeBtn": true,
110112
"type": "image",
111113
"url": "https://tdesign.gtimg.com/mobile/demos/example6.png",
112114
},
113115
Object {
114116
"name": "uploaded3.png",
117+
"removeBtn": true,
115118
"type": "image",
116119
"url": "https://tdesign.gtimg.com/mobile/demos/example5.png",
117120
},
@@ -130,6 +133,7 @@ exports[`Upload Upload multiple demo works fine 1`] = `
130133
"image",
131134
]
132135
}}"
136+
removeBtn="{{false}}"
133137
bind:click="handleClick"
134138
bind:remove="handleRemove"
135139
bind:sort-end="handleSortEnd"

‎src/upload/_example/multiple/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,19 @@ Component({
55
url: 'https://tdesign.gtimg.com/mobile/demos/example4.png',
66
name: 'uploaded1.png',
77
type: 'image',
8+
removeBtn: true,
89
},
910
{
1011
url: 'https://tdesign.gtimg.com/mobile/demos/example6.png',
1112
name: 'uploaded2.png',
1213
type: 'image',
14+
removeBtn: true,
1315
},
1416
{
1517
url: 'https://tdesign.gtimg.com/mobile/demos/example5.png',
1618
name: 'uploaded3.png',
1719
type: 'image',
20+
removeBtn: true,
1821
},
1922
],
2023
gridConfig: {

‎src/upload/_example/multiple/index.wxml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
media-type="{{['video','image']}}"
55
files="{{originFiles}}"
66
gridConfig="{{gridConfig}}"
7+
removeBtn="{{false}}"
78
bind:success="handleSuccess"
89
bind:remove="handleRemove"
910
bind:click="handleClick"

‎src/upload/props.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66

77
import { TdUploadProps } from './type';
88
const props: TdUploadProps = {
9+
/** 添加按钮 */
10+
addBtn: {
11+
type: Boolean,
12+
value: true,
13+
},
914
/** 添加按钮内容 */
1015
addContent: {
1116
type: String,
@@ -60,6 +65,11 @@ const props: TdUploadProps = {
6065
type: Array,
6166
value: ['image', 'video'],
6267
},
68+
/** 移除按钮 */
69+
removeBtn: {
70+
type: Boolean,
71+
value: true,
72+
},
6373
/** 自定义上传方法 */
6474
requestMethod: {
6575
type: null,

‎src/upload/type.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@
77
import { ImageProps } from '../image/index';
88

99
export interface TdUploadProps {
10+
/**
11+
* 添加按钮
12+
* @default true
13+
*/
14+
addBtn?: {
15+
type: BooleanConstructor;
16+
value?: boolean;
17+
};
1018
/**
1119
* 添加按钮内容
1220
*/
@@ -95,6 +103,14 @@ export interface TdUploadProps {
95103
type: ArrayConstructor;
96104
value?: Array<MediaType>;
97105
};
106+
/**
107+
* 移除按钮
108+
* @default true
109+
*/
110+
removeBtn?: {
111+
type: BooleanConstructor;
112+
value?: boolean;
113+
};
98114
/**
99115
* 自定义上传方法
100116
*/

‎src/upload/upload.wxml

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
<t-image
3030
wx:if="{{file.type !== 'video'}}"
3131
data-file="{{file}}"
32-
bind:tap="onProofTap"
3332
data-index="{{index}}"
3433
t-class="{{classPrefix}}__thumbnail"
3534
style="{{imageProps && imageProps.style || ''}}"
@@ -41,23 +40,24 @@
4140
shape="{{imageProps && imageProps.shape || 'round'}}"
4241
webp="{{imageProps && imageProps.webp || false}}"
4342
showMenuByLongpress="{{imageProps && imageProps.showMenuByLongpress || false}}"
43+
bind:tap="onProofTap"
4444
/>
4545
<video
46-
data-file="{{file}}"
47-
bind:tap="onFileClick"
4846
wx:if="{{file.type === 'video'}}"
4947
class="{{classPrefix}}__thumbnail"
5048
src="{{file.url}}"
5149
poster="{{ file.thumb }}"
5250
controls
5351
autoplay="{{false}}"
5452
objectFit="contain"
53+
data-file="{{file}}"
54+
bind:tap="onFileClick"
5555
/>
5656
<!-- 失败重试 -->
5757
<view
58-
data-index="{{index}}"
5958
wx:if="{{file.status && file.status != 'done'}}"
6059
class="{{classPrefix}}__progress-mask"
60+
data-index="{{index}}"
6161
data-file="{{file}}"
6262
bind:tap="onFileClick"
6363
>
@@ -73,11 +73,12 @@
7373

7474
<!-- 删除 -->
7575
<view
76+
wx:if="{{ _.isBoolean(file.removeBtn) ? file.removeBtn : removeBtn}}"
7677
class="{{classPrefix}}__close-btn hotspot-expanded"
77-
bindtap="onDelete"
7878
data-index="{{index}}"
7979
aria-role="button"
8080
aria-label="删除"
81+
bindtap="onDelete"
8182
>
8283
<t-icon name="close" size="32rpx" color="#fff" />
8384
</view>
@@ -86,11 +87,11 @@
8687

8788
<!-- 添加 -->
8889
<t-grid-item
89-
wx:if="{{customLimit > 0}}"
90+
wx:if="{{ addBtn && customLimit > 0}}"
9091
t-class="{{classPrefix}}__grid"
9192
t-class-content="{{classPrefix}}__grid-content"
92-
bindclick="onAddTap"
9393
aria-label="上传"
94+
bindclick="onAddTap"
9495
>
9596
<view class="{{classPrefix}}__wrapper" style="{{gridItemStyle}}">
9697
<slot name="add-content" />
@@ -112,14 +113,14 @@
112113
>
113114
<view
114115
class="{{classPrefix}}__drag-item"
116+
style="width: {{100 / column}}%; --td-upload-drag-transition-duration: {{transition.duration}}ms; --td-upload-drag-transition-timing-function: {{transition.timingFunction}}"
115117
wx:for="{{customFiles}}"
116118
wx:key="url"
117119
wx:for-item="file"
118-
style="width: {{100 / column}}%; --td-upload-drag-transition-duration: {{transition.duration}}ms; --td-upload-drag-transition-timing-function: {{transition.timingFunction}}"
120+
data-index="{{index}}"
119121
bind:longpress="{{handler.longPress}}"
120122
catch:touchmove="{{dragging ? handler.touchMove : ''}}"
121123
catch:touchend="{{dragging ? handler.touchEnd : ''}}"
122-
data-index="{{index}}"
123124
>
124125
<!-- 图片/视频 -->
125126
<t-grid-item
@@ -137,7 +138,6 @@
137138
<t-image
138139
wx:if="{{file.type !== 'video'}}"
139140
data-file="{{file}}"
140-
bind:tap="onProofTap"
141141
data-index="{{index}}"
142142
t-class="{{classPrefix}}__thumbnail"
143143
style="{{imageProps && imageProps.style || ''}}"
@@ -149,23 +149,24 @@
149149
shape="{{imageProps && imageProps.shape || 'round'}}"
150150
webp="{{imageProps && imageProps.webp || false}}"
151151
showMenuByLongpress="{{imageProps && imageProps.showMenuByLongpress || false}}"
152+
bind:tap="onProofTap"
152153
/>
153154
<video
154-
data-file="{{file}}"
155-
bind:tap="onFileClick"
156155
wx:if="{{file.type === 'video'}}"
157156
class="{{classPrefix}}__thumbnail"
158157
src="{{file.url}}"
159158
poster="{{ file.thumb }}"
160159
controls
161160
autoplay="{{false}}"
162161
objectFit="contain"
162+
data-file="{{file}}"
163+
bind:tap="onFileClick"
163164
/>
164165
<!-- 失败重试 -->
165166
<view
166-
data-index="{{index}}"
167167
wx:if="{{file.status && file.status != 'done'}}"
168168
class="{{classPrefix}}__progress-mask"
169+
data-index="{{index}}"
169170
data-file="{{file}}"
170171
bind:tap="onFileClick"
171172
>
@@ -191,26 +192,27 @@
191192

192193
<!-- 删除 -->
193194
<view
195+
wx:if="{{ _.isBoolean(file.removeBtn) ? file.removeBtn : removeBtn}}"
194196
class="{{classPrefix}}__close-btn hotspot-expanded"
195-
bindtap="onDelete"
196197
data-index="{{index}}"
197198
data-url="{{file.url}}"
198199
aria-role="button"
199200
aria-label="删除"
201+
bindtap="onDelete"
200202
>
201203
<t-icon name="close" size="32rpx" color="#fff" />
202204
</view>
203205
</view>
204206
</t-grid-item>
205-
<!-- 添加 -->
206207
</view>
207-
<view class="{{classPrefix}}__drag-item" style="width: {{100 / column}}%" wx:if="{{customLimit > 0}}">
208+
<!-- 添加 -->
209+
<view wx:if="{{addBtn && customLimit > 0}}" class="{{classPrefix}}__drag-item" style="width: {{100 / column}}%">
208210
<t-grid-item
209211
t-class="{{classPrefix}}__grid"
210212
t-class-content="{{classPrefix}}__grid-content"
211-
bindclick="onAddTap"
212213
aria-label="上传"
213214
style="width: 100%"
215+
bindclick="onAddTap"
214216
>
215217
<view class="{{classPrefix}}__wrapper" style="{{gridItemStyle}}">
216218
<slot name="add-content" />

0 commit comments

Comments
 (0)