blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Uploader): use composition api

Browse Source
This commit is contained in:
chenjiahan 2020-12-15 15:14:36 +08:00
parent 7d20266f41
commit a4ef370b0d
3 changed files with 215 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/uploader/README.md
View File

@ -20,10 +20,14 @@ app.use(Uploader);
```js ```js
export default { export default {
methods: { setup() {
afterRead(file) { const afterRead = (file) => {
console.log(file); console.log(file);
}, };
return {
afterRead,
};
}, },
}; };
``` ```
@ -35,10 +39,17 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
const fileList = ref([
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
{ url: 'https://cloud-image', isImage: true },
]);
return { return {
fileList: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }], fileList,
}; };
}, },
}; };
@ -51,25 +62,24 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const fileList = ref([
fileList: [ {
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg',
url: 'https://img.yzcdn.cn/vant/leaf.jpg', status: 'uploading',
status: 'uploading', message: 'Uploading...',
message: 'Uploading...', },
}, {
{ url: 'https://img.yzcdn.cn/vant/tree.jpg',
url: 'https://img.yzcdn.cn/vant/tree.jpg', status: 'failed',
status: 'failed', message: 'Failed',
message: 'Failed', },
}, ]);
],
}; const afterRead = (file) => {
},
methods: {
afterRead(file) {
file.status = 'uploading'; file.status = 'uploading';
file.message = 'Uploading...'; file.message = 'Uploading...';
@ -77,7 +87,12 @@ export default {
file.status = 'failed'; file.status = 'failed';
file.message = 'Failed'; file.message = 'Failed';
}, 1000); }, 1000);
}, };
return {
fileList,
afterRead,
};
}, },
}; };
``` ```
@ -89,10 +104,14 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
const fileList = ref([]);
return { return {
fileList: [], fileList,
}; };
}, },
}; };
@ -108,11 +127,15 @@ export default {
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
methods: { setup() {
onOversize(file) { const onOversize = (file) => {
console.log(file); console.log(file);
Toast('File size cannot exceed 500kb); Toast('File size cannot exceed 500kb');
}, };
return {
onOversize,
};
}, },
}; };
``` ```
@ -159,15 +182,18 @@ export default {
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
methods: { setup() {
beforeRead(file) { // 返回布尔值
const beforeRead = (file) => {
if (file.type !== 'image/jpeg') { if (file.type !== 'image/jpeg') {
Toast('Please upload an image in jpg format'); Toast('Please upload an image in jpg format');
return false; return false;
} }
return true; return true;
}, };
asyncBeforeRead(file) {
// 返回 Promise
const asyncBeforeRead = (file) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (file.type !== 'image/jpeg') { if (file.type !== 'image/jpeg') {
Toast('Please upload an image in jpg format'); Toast('Please upload an image in jpg format');
@ -179,7 +205,12 @@ export default {
resolve(img); resolve(img);
} }
}); });
}, };
return {
beforeRead,
asyncBeforeRead,
};
}, },
}; };
``` ```

106
src/uploader/README.zh-CN.md
View File

@ -26,11 +26,15 @@ app.use(Uploader);
```js ```js
export default { export default {
methods: { setup() {
afterRead(file) { const afterRead = (file) => {
// 此时可以自行将文件上传至服务器 // 此时可以自行将文件上传至服务器
console.log(file); console.log(file);
}, };
return {
afterRead,
};
}, },
}; };
``` ```
@ -44,15 +48,19 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
const fileList = ref([
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
// Uploader 根据文件后缀来判断是否为图片文件
// 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
{ url: 'https://cloud-image', isImage: true },
]);
return { return {
fileList: [ fileList,
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
// Uploader 根据文件后缀来判断是否为图片文件
// 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
{ url: 'https://cloud-image', isImage: true },
],
}; };
}, },
}; };
@ -67,25 +75,24 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const fileList = ref([
fileList: [ {
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg',
url: 'https://img.yzcdn.cn/vant/leaf.jpg', status: 'uploading',
status: 'uploading', message: '上传中...',
message: '上传中...', },
}, {
{ url: 'https://img.yzcdn.cn/vant/tree.jpg',
url: 'https://img.yzcdn.cn/vant/tree.jpg', status: 'failed',
status: 'failed', message: '上传失败',
message: '上传失败', },
}, ]);
],
}; const afterRead = (file) => {
},
methods: {
afterRead(file) {
file.status = 'uploading'; file.status = 'uploading';
file.message = '上传中...'; file.message = '上传中...';
@ -93,7 +100,12 @@ export default {
file.status = 'failed'; file.status = 'failed';
file.message = '上传失败'; file.message = '上传失败';
}, 1000); }, 1000);
}, };
return {
fileList,
afterRead,
};
}, },
}; };
``` ```
@ -107,10 +119,14 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
const fileList = ref([]);
return { return {
fileList: [], fileList,
}; };
}, },
}; };
@ -125,14 +141,18 @@ export default {
``` ```
```js ```js
import Toast from 'vant'; import { Toast } from 'vant';
export default { export default {
methods: { setup() {
onOversize(file) { const onOversize = (file) => {
console.log(file); console.log(file);
Toast('文件大小不能超过 500kb'); Toast('文件大小不能超过 500kb');
}, };
return {
onOversize,
};
}, },
}; };
``` ```
@ -185,17 +205,18 @@ export default {
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
methods: { setup() {
// 返回布尔值 // 返回布尔值
beforeRead(file) { const beforeRead = (file) => {
if (file.type !== 'image/jpeg') { if (file.type !== 'image/jpeg') {
Toast('请上传 jpg 格式图片'); Toast('请上传 jpg 格式图片');
return false; return false;
} }
return true; return true;
}, };
// 返回 Promise // 返回 Promise
asyncBeforeRead(file) { const asyncBeforeRead = (file) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (file.type !== 'image/jpeg') { if (file.type !== 'image/jpeg') {
Toast('请上传 jpg 格式图片'); Toast('请上传 jpg 格式图片');
@ -207,7 +228,12 @@ export default {
resolve(img); resolve(img);
} }
}); });
}, };
return {
beforeRead,
asyncBeforeRead,
};
}, },
}; };
``` ```

159
src/uploader/demo/index.vue
View File

@ -50,44 +50,49 @@
</template> </template>
<script> <script>
export default { import { reactive, toRefs } from 'vue';
i18n: { import { useTranslate } from '@demo/use-translate';
'zh-CN': { import Toast from '../../toast';
status: '上传状态',
failed: '上传失败',
upload: '上传文件',
preview: '文件预览',
maxSize: '限制上传大小',
disabled: '禁用文件上传',
maxCount: '限制上传数量',
uploading: '上传中...',
imageName: '图片名称',
beforeRead: '上传前置处理',
overSizeTip: '文件大小不能超过 500kb',
invalidType: '请上传 jpg 格式图片',
customUpload: '自定义上传样式',
previewCover: '自定义预览样式',
},
'en-US': {
status: 'Upload Status',
failed: 'Failed',
upload: 'Upload File',
preview: 'Preview File',
maxSize: 'Max Size',
disabled: 'Disable Uploader',
maxCount: 'Max Count',
uploading: 'Uploading...',
imageName: 'Image Name',
beforeRead: 'Before Read',
overSizeTip: 'File size cannot exceed 500kb',
invalidType: 'Please upload an image in jpg format',
customUpload: 'Custom Upload Area',
previewCover: 'Preview Cover',
},
},
data() { const i18n = {
return { 'zh-CN': {
status: '上传状态',
failed: '上传失败',
upload: '上传文件',
preview: '文件预览',
maxSize: '限制上传大小',
disabled: '禁用文件上传',
maxCount: '限制上传数量',
uploading: '上传中...',
imageName: '图片名称',
beforeRead: '上传前置处理',
overSizeTip: '文件大小不能超过 500kb',
invalidType: '请上传 jpg 格式图片',
customUpload: '自定义上传样式',
previewCover: '自定义预览样式',
},
'en-US': {
status: 'Upload Status',
failed: 'Failed',
upload: 'Upload File',
preview: 'Preview File',
maxSize: 'Max Size',
disabled: 'Disable Uploader',
maxCount: 'Max Count',
uploading: 'Uploading...',
imageName: 'Image Name',
beforeRead: 'Before Read',
overSizeTip: 'File size cannot exceed 500kb',
invalidType: 'Please upload an image in jpg format',
customUpload: 'Custom Upload Area',
previewCover: 'Preview Cover',
},
};
export default {
setup() {
const t = useTranslate(i18n);
const state = reactive({
fileList: [ fileList: [
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }, { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
{ url: 'https://img.yzcdn.cn/vant/tree.jpg' }, { url: 'https://img.yzcdn.cn/vant/tree.jpg' },
@ -95,61 +100,63 @@ export default {
fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }], fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
fileList3: [], fileList3: [],
fileList4: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }], fileList4: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
statusFileList: [], statusFileList: [
previewCoverFiles: [], {
}; url: 'https://img.yzcdn.cn/vant/leaf.jpg',
}, status: 'uploading',
message: t('uploading'),
created() { },
this.statusFileList.push( {
{ url: 'https://img.yzcdn.cn/vant/tree.jpg',
url: 'https://img.yzcdn.cn/vant/leaf.jpg', status: 'failed',
status: 'uploading', message: t('failed'),
message: this.t('uploading'), },
}, ],
{ previewCoverFiles: [
url: 'https://img.yzcdn.cn/vant/tree.jpg', {
status: 'failed', url: 'https://img.yzcdn.cn/vant/leaf.jpg',
message: this.t('failed'), file: {
} name: t('imageName'),
); },
},
this.previewCoverFiles.push({ ],
url: 'https://img.yzcdn.cn/vant/leaf.jpg',
file: {
name: this.t('imageName'),
},
}); });
},
methods: { const beforeRead = (file) => {
beforeRead(file) {
if (file.type !== 'image/jpeg') { if (file.type !== 'image/jpeg') {
this.$toast(this.t('invalidType')); Toast(t('invalidType'));
return false; return false;
} }
return true; return true;
}, };
afterRead(file, detail) { const afterRead = (file, detail) => {
console.log(file, detail); console.log(file, detail);
}, };
afterReadFailed(item) { const afterReadFailed = (item) => {
item.status = 'uploading'; item.status = 'uploading';
item.message = this.t('uploading'); item.message = t('uploading');
setTimeout(() => { setTimeout(() => {
item.status = 'failed'; item.status = 'failed';
item.message = this.t('failed'); item.message = t('failed');
}, 1000); }, 1000);
}, };
onOversize(file, detail) { const onOversize = (file, detail) => {
console.log(file, detail); console.log(file, detail);
this.$toast(this.t('overSizeTip')); Toast(t('overSizeTip'));
}, };
return {
...toRefs(state),
t,
afterRead,
beforeRead,
onOversize,
afterReadFailed,
};
}, },
}; };
</script> </script>