diff --git a/packages/style/var.less b/packages/style/var.less
index a2d4dc969..9e8b78e9d 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -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;
diff --git a/packages/uploader/demo/index.vue b/packages/uploader/demo/index.vue
index e72864a4e..249f37123 100644
--- a/packages/uploader/demo/index.vue
+++ b/packages/uploader/demo/index.vue
@@ -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);
- }
}
};
diff --git a/packages/uploader/en-US.md b/packages/uploader/en-US.md
index 9b00b9a12..18d68c33f 100644
--- a/packages/uploader/en-US.md
+++ b/packages/uploader/en-US.md
@@ -13,13 +13,13 @@ Vue.use(Uploader);
### Basic Usage
```html
-
+
```
```javascript
export default {
methods: {
- onRead(file) {
+ afterRead(file) {
console.log(file)
}
}
@@ -39,7 +39,7 @@ export default {
### Upload Style
```html
-
+
Upload Image
```
diff --git a/packages/uploader/index.js b/packages/uploader/index.js
index b757c9589..c7ccf55e7 100644
--- a/packages/uploader/index.js
+++ b/packages/uploader/index.js
@@ -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 => (
-
+ return this.uploadedFiles.map(file => (
+
));
}
},
renderUpload() {
- if (this.previewImages.length >= this.maxCount) {
+ if (this.uploadedFiles.length >= this.maxCount) {
return;
}
diff --git a/packages/uploader/index.less b/packages/uploader/index.less
index 4841f98b9..14140fc9f 100644
--- a/packages/uploader/index.less
+++ b/packages/uploader/index.less
@@ -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;
diff --git a/packages/uploader/zh-CN.md b/packages/uploader/zh-CN.md
index faf916c99..fac566433 100644
--- a/packages/uploader/zh-CN.md
+++ b/packages/uploader/zh-CN.md
@@ -15,13 +15,13 @@ Vue.use(Uploader);
图片上传完毕后会触发`after-read`传入的回调函数,获取到对应的`file`对象
```html
-
+
```
```javascript
export default {
methods: {
- onRead(file) {
+ afterRead(file) {
console.log(file)
}
}
@@ -45,7 +45,7 @@ export default {
通过插槽可以自定义上传区域的样式
```html
-
+
上传图片
```