[Doc] Uploader: update demo

This commit is contained in:
陈嘉涵 2019-06-04 16:02:36 +08:00
parent 076eb1c601
commit af4dea96ed
6 changed files with 16 additions and 32 deletions

View File

@ -579,3 +579,5 @@
@uploader-icon-color: @gray-dark;
@uploader-text-color: @gray-dark;
@uploader-text-font-size: 12px;
@uploader-upload-border-color: @gray-light;
@uploader-upload-background-color: @white;

View File

@ -29,33 +29,15 @@
export default {
i18n: {
'zh-CN': {
name: '标识名称',
upload: '上传图片',
maxCount: '上传数量限制',
uploadStyle: '自定义上传样式'
},
'en-US': {
name: 'Name',
upload: 'Upload Image',
maxCount: 'Max Count',
uploadStyle: 'Upload Style'
}
},
methods: {
logContent(file) {
console.log(file);
},
beforeRead(index) {
return file => {
console.log(index, file);
};
},
toastName(file, detail) {
this.$toast(detail.name);
}
}
};
</script>

View File

@ -13,13 +13,13 @@ Vue.use(Uploader);
### Basic Usage
```html
<van-uploader preview :after-read="onRead" />
<van-uploader preview :after-read="afterRead" />
```
```javascript
export default {
methods: {
onRead(file) {
afterRead(file) {
console.log(file)
}
}
@ -39,7 +39,7 @@ export default {
### Upload Style
```html
<van-uploader :after-read="onRead">
<van-uploader>
<van-button icon="photo" type="primary">Upload Image</van-button>
</van-uploader>
```

View File

@ -33,7 +33,7 @@ export default sfc({
data() {
return {
previewImages: []
uploadedFiles: []
};
},
@ -61,7 +61,7 @@ export default sfc({
}
if (Array.isArray(files)) {
const maxCount = this.maxCount - this.previewImages.length;
const maxCount = this.maxCount - this.uploadedFiles.length;
files = files.slice(0, maxCount);
Promise.all(files.map(this.readFile)).then(contents => {
@ -122,7 +122,7 @@ export default sfc({
},
addPreviewImage(file) {
this.previewImages.push(file.content);
this.uploadedFiles.push(file);
},
resetInput() {
@ -134,14 +134,14 @@ export default sfc({
renderPreview() {
if (this.preview) {
return this.previewImages.map(image => (
<Image fit="cover" class={bem('preview')} src={image} />
return this.uploadedFiles.map(file => (
<Image fit="cover" class={bem('preview')} src={file.content} />
));
}
},
renderUpload() {
if (this.previewImages.length >= this.maxCount) {
if (this.uploadedFiles.length >= this.maxCount) {
return;
}

View File

@ -34,8 +34,8 @@
width: @uploader-size;
height: @uploader-size;
margin: 0 10px 10px 0;
background-color: @white;
border: 1px dashed @gray-light;
background-color: @uploader-upload-background-color;
border: 1px dashed @uploader-upload-border-color;
&-icon {
color: @uploader-icon-color;

View File

@ -15,13 +15,13 @@ Vue.use(Uploader);
图片上传完毕后会触发`after-read`传入的回调函数,获取到对应的`file`对象
```html
<van-uploader preview :after-read="onRead" />
<van-uploader preview :after-read="afterRead" />
```
```javascript
export default {
methods: {
onRead(file) {
afterRead(file) {
console.log(file)
}
}
@ -45,7 +45,7 @@ export default {
通过插槽可以自定义上传区域的样式
```html
<van-uploader :after-read="onRead">
<van-uploader>
<van-button icon="photo" type="primary">上传图片</van-button>
</van-uploader>
```