From c0e2ce200e194ee79217b64b9dc9ca1cbf001d90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 27 May 2019 20:50:40 +0800 Subject: [PATCH] [new feature] Uploader: add default style & upload-text prop --- docs/markdown/changelog.zh-CN.md | 5 +++ packages/slider/test/index.spec.js | 1 - packages/uploader/demo/index.vue | 39 ++++++++----------- packages/uploader/en-US.md | 27 ++++--------- packages/uploader/index.js | 31 ++++++++++----- packages/uploader/index.less | 23 +++++++++++ .../test/__snapshots__/demo.spec.js.snap | 14 +++---- packages/uploader/zh-CN.md | 35 ++++++----------- 8 files changed, 92 insertions(+), 83 deletions(-) diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md index 6fd40fd4c..93b011162 100644 --- a/docs/markdown/changelog.zh-CN.md +++ b/docs/markdown/changelog.zh-CN.md @@ -39,6 +39,11 @@ - 新增`drag-start`事件 - 新增`drag-end`事件 +##### Uploader + +- 增加上传区域默认样式 +- 新增`upload-text`属性 + ### [v2.0.0-beta.1](https://github.com/youzan/vant/tree/v2.0.0-beta.1) diff --git a/packages/slider/test/index.spec.js b/packages/slider/test/index.spec.js index 0a6a8d9f3..9e99e2053 100644 --- a/packages/slider/test/index.spec.js +++ b/packages/slider/test/index.spec.js @@ -24,7 +24,6 @@ test('drag button', () => { wrapper.setProps({ value }); }); - const button = wrapper.find('.van-slider__button'); triggerDrag(button, 50, 0); expect(wrapper).toMatchSnapshot(); diff --git a/packages/uploader/demo/index.vue b/packages/uploader/demo/index.vue index 78a7d4e7d..8ed13088f 100644 --- a/packages/uploader/demo/index.vue +++ b/packages/uploader/demo/index.vue @@ -1,26 +1,18 @@ @@ -30,11 +22,13 @@ export default { i18n: { 'zh-CN': { name: '标识名称', - title2: '设置 input 属性' + upload: '上传图片', + uploadStyle: '自定义上传样式' }, 'en-US': { name: 'Name', - title2: 'Set input attrs' + upload: 'Upload Image', + uploadStyle: 'Upload Style' } }, @@ -58,9 +52,10 @@ export default { diff --git a/packages/uploader/en-US.md b/packages/uploader/en-US.md index cafcff84e..1c1fc7e1d 100644 --- a/packages/uploader/en-US.md +++ b/packages/uploader/en-US.md @@ -13,11 +13,7 @@ Vue.use(Uploader); ### Basic Usage ```html -
- - - -
+ ``` ```javascript @@ -30,24 +26,14 @@ export default { }; ``` -### Name +### Upload Style ```html - - + + Upload Image ``` -```javascript -export default { - methods: { - onRead(file, detail) { - this.$toast(detail.name); - } - } -}; -``` - ## API ### Props @@ -55,14 +41,15 @@ export default { | Attribute | Description | Type | Default | |------|------|------|------| | name | Input name | `String` | - | -| result-type | Type of file read result, can be set to `dataUrl` `text` | `String` | `dataUrl` | | accept | Accepted file type | `String` | `image/*` | -| disabled | Whether to disabled the upload | `Boolean` | `false` | | multiple | Whether to enable multiple selection pictures | `Boolean` | `false` | +| disabled | Whether to disabled the upload | `Boolean` | `false` | | capture | Capture，can be set to `camera` | `String` | - | | before-read | Hook before reading the file, return false to stop reading the file | `Function` | - | | after-read | Hook after reading the file | `Function` | - | | max-size | Max size of file | `Number` | - | +| result-type | Type of file read result, can be set to `dataUrl` `text` | `String` | `dataUrl` | +| upload-text | Upload text | `String` | - | ### Events diff --git a/packages/uploader/index.js b/packages/uploader/index.js index 2ad76dd48..5ab646c26 100644 --- a/packages/uploader/index.js +++ b/packages/uploader/index.js @@ -1,4 +1,5 @@ import { use } from '../utils'; +import Icon from '../icon'; const [sfc, bem] = use('uploader'); @@ -7,6 +8,7 @@ export default sfc({ props: { disabled: Boolean, + uploadText: String, beforeRead: Function, afterRead: Function, accept: { @@ -62,10 +64,7 @@ export default sfc({ }); } else { this.readFile(files).then(content => { - this.onAfterRead( - { file: files, content }, - files.size > this.maxSize - ); + this.onAfterRead({ file: files, content }, files.size > this.maxSize); }); } }, @@ -103,16 +102,28 @@ export default sfc({ }, render(h) { - const { - accept, - disabled - } = this; + const { slots, accept, disabled, uploadText } = this; + + function Upload() { + const slot = slots(); + + if (slot) { + return slot; + } + + return ( +
+ + {uploadText && {uploadText}} +
+ ); + } return (
- {this.slots()} + {Upload()}
-
-
-
+
+
+
-
-
-
-
+
`; diff --git a/packages/uploader/zh-CN.md b/packages/uploader/zh-CN.md index b8a0131f2..372ec50d7 100644 --- a/packages/uploader/zh-CN.md +++ b/packages/uploader/zh-CN.md @@ -13,9 +13,7 @@ Vue.use(Uploader); ### 基础用法 ```html - - - + ``` ```javascript @@ -28,24 +26,14 @@ export default { }; ``` -### 标识名称 +### 自定义上传样式 ```html - - + + 上传图片 ``` -```javascript -export default { - methods: { - onRead(file, detail) { - this.$toast(detail.name); - } - } -}; -``` - ## API ### Props @@ -53,14 +41,15 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | name | 标识符，可以在回调函数的第二项参数中获取 | `String` | - | 1.6.13 | -| result-type | 文件读取结果类型，可选值为 `text` | `String` | `dataUrl` | - | | accept | 接受的文件类型 | `String` | `image/*` | - | -| disabled | 是否禁用图片上传 | `Boolean` | `false` | - | | multiple | 是否开启图片多选，部分安卓机型不支持 | `Boolean` | `false` | 2.0.0 | -| capture | 捕获模式，可选值为`camera`(直接调起摄像头) | `String` | - | 2.0.0 | -| before-read | 读取前的回调函数，返回 false 可终止文件读取 | `Function` | - | - | -| after-read | 读取完成后的回调函数 | `Function` | - | - | -| max-size | 文件大小限制，单位为 byte | `Number` | - | - | +| disabled | 是否禁用图片上传 | `Boolean` | `false` | - | +| capture | 图片选取模式，可选值为`camera`(直接调起摄像头) | `String` | - | 2.0.0 | +| before-read | 文件读取前的回调函数，返回`false`可终止文件读取 | `Function` | - | - | +| after-read | 文件读取完成后的回调函数 | `Function` | - | - | +| max-size | 文件大小限制，单位为`byte` | `Number` | - | - | +| result-type | 文件读取结果类型，可选值为`text` | `String` | `dataUrl` | - | +| upload-text | 上传区域文字提示 | `String` | - | 2.0.0 | ### Events @@ -72,7 +61,7 @@ export default { | 名称 | 说明 | |------|------| -| default | 自定义 uploader 内容 | +| default | 自定义上传区域 | ### before-read、after-read 回调参数