mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
feat(Uploader): add deletable prop (#2411)
This commit is contained in:
neverland
GitHub
parent
cee926059e
commit
4c09027afe
@ -127,19 +127,20 @@ Page({
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|-----------|-----------|-----------|-----------|-----------|
|
||||
| name | 标识符，可以在回调函数的第二项参数中获取 | *string \| number* | - |
|
||||
| accept | 接受的文件类型, 可选值为`all` `image` `file` | *string* | `image` |
|
||||
| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | *string \| number* | `80px` |
|
||||
| preview-image | 是否在上传完成后展示预览图 | *boolean* | `true` |
|
||||
| preview-full-image | 是否在点击预览图后展示全屏图片预览 | *boolean* | `true` |
|
||||
| multiple | 是否开启图片多选，部分安卓机型不支持 | *boolean* | `false` |
|
||||
| disabled | 是否禁用文件上传 | *boolean* | `false` |
|
||||
| capture | 图片选取模式，当`accept`为`image`类型时设置`capture`可选值为`camera`可以直接调起摄像头 | *string \| string[]* | `['album', 'camera']` |
|
||||
| disabled | 是否禁用文件上传 | *boolean* | `false` |
|
||||
| max-size | 文件大小限制，单位为`byte` | *number* | - |
|
||||
| max-count | 文件上传数量限制 | *number* | - |
|
||||
| upload-text | 上传区域文字提示 | *string* | - |
|
||||
| image-fit | 预览图裁剪模式，可选值参考小程序`image`组件的`mode`属性 | *string* | `scaleToFill` |
|
||||
| name | 标识符，可以在回调函数的第二项参数中获取 | *string \| number* | - | - |
|
||||
| accept | 接受的文件类型, 可选值为`all` `image` `file` | *string* | `image` | - |
|
||||
| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | *string \| number* | `80px` | - |
|
||||
| preview-image | 是否在上传完成后展示预览图 | *boolean* | `true` | - |
|
||||
| preview-full-image | 是否在点击预览图后展示全屏图片预览 | *boolean* | `true` | - |
|
||||
| multiple | 是否开启图片多选，部分安卓机型不支持 | *boolean* | `false` | - |
|
||||
| disabled | 是否禁用文件上传 | *boolean* | `false` | - |
|
||||
| deletable | 是否展示删除按钮 | *boolean* | `true` | - |
|
||||
| capture | 图片选取模式，当`accept`为`image`类型时设置`capture`可选值为`camera`可以直接调起摄像头 | *string \| string[]* | `['album', 'camera']` | - |
|
||||
| disabled | 是否禁用文件上传 | *boolean* | `false` | - |
|
||||
| max-size | 文件大小限制，单位为`byte` | *number* | - | - |
|
||||
| max-count | 文件上传数量限制 | *number* | - | - |
|
||||
| upload-text | 上传区域文字提示 | *string* | - | - |
|
||||
| image-fit | 预览图裁剪模式，可选值参考小程序`image`组件的`mode`属性 | *string* | `scaleToFill` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -7,6 +7,8 @@ VantComponent({
|
||||
disabled: Boolean,
|
||||
multiple: Boolean,
|
||||
uploadText: String,
|
||||
useSlot: Boolean,
|
||||
useBeforeRead: Boolean,
|
||||
previewSize: {
|
||||
type: null,
|
||||
value: 90,
|
||||
@ -33,6 +35,10 @@ VantComponent({
|
||||
type: Number,
|
||||
value: 100
|
||||
},
|
||||
deletable: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
previewImage: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
@ -44,9 +50,7 @@ VantComponent({
|
||||
imageFit: {
|
||||
type: String,
|
||||
value: 'scaleToFill'
|
||||
},
|
||||
useSlot: Boolean,
|
||||
useBeforeRead: Boolean
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
@ -61,9 +65,7 @@ VantComponent({
|
||||
const lists = fileList.map(item => ({
|
||||
...item,
|
||||
isImage:
|
||||
typeof item.isImage === 'undefined'
|
||||
? isImageFile(item)
|
||||
: item.isImage
|
||||
typeof item.isImage === 'undefined' ? isImageFile(item) : item.isImage
|
||||
}));
|
||||
this.setData({ lists, isInCount: lists.length < maxCount });
|
||||
},
|
||||
@ -110,40 +112,43 @@ VantComponent({
|
||||
});
|
||||
}
|
||||
|
||||
chooseFile.then((res:
|
||||
WechatMiniprogram.ChooseImageSuccessCallbackResult |
|
||||
WechatMiniprogram.ChooseMessageFileSuccessCallbackResult
|
||||
) => {
|
||||
const file = multiple ? res.tempFiles : res.tempFiles[0];
|
||||
chooseFile.then(
|
||||
(
|
||||
res:
|
||||
| WechatMiniprogram.ChooseImageSuccessCallbackResult
|
||||
| WechatMiniprogram.ChooseMessageFileSuccessCallbackResult
|
||||
) => {
|
||||
const file = multiple ? res.tempFiles : res.tempFiles[0];
|
||||
|
||||
// 检查文件大小
|
||||
if (file instanceof Array) {
|
||||
const sizeEnable = file.every(item => item.size <= maxSize);
|
||||
if (!sizeEnable) {
|
||||
// 检查文件大小
|
||||
if (file instanceof Array) {
|
||||
const sizeEnable = file.every(item => item.size <= maxSize);
|
||||
if (!sizeEnable) {
|
||||
this.$emit('oversize', { name });
|
||||
return;
|
||||
}
|
||||
} else if (file.size > maxSize) {
|
||||
this.$emit('oversize', { name });
|
||||
return;
|
||||
}
|
||||
} else if (file.size > maxSize) {
|
||||
this.$emit('oversize', { name });
|
||||
return;
|
||||
}
|
||||
|
||||
// 触发上传之前的钩子函数
|
||||
if (useBeforeRead) {
|
||||
this.$emit('before-read', {
|
||||
file,
|
||||
name,
|
||||
callback: (result: boolean) => {
|
||||
if (result) {
|
||||
// 开始上传
|
||||
this.$emit('after-read', { file, name });
|
||||
// 触发上传之前的钩子函数
|
||||
if (useBeforeRead) {
|
||||
this.$emit('before-read', {
|
||||
file,
|
||||
name,
|
||||
callback: (result: boolean) => {
|
||||
if (result) {
|
||||
// 开始上传
|
||||
this.$emit('after-read', { file, name });
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$emit('after-read', { file, name });
|
||||
});
|
||||
} else {
|
||||
this.$emit('after-read', { file, name });
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
},
|
||||
|
||||
deleteItem(event) {
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
<view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url || item.path }}</view>
|
||||
</view>
|
||||
<van-icon
|
||||
wx:if="{{ deletable }}"
|
||||
name="clear"
|
||||
class="van-uploader__preview-delete"
|
||||
data-index="{{ index }}"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user