[new feature] Uploader: add default style & upload-text prop

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)
 

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();

packages/uploader/demo/index.vue

@@ -1,26 +1,18 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <div class="demo-uploader-container">
+      <van-uploader />
-        <van-uploader
-          :max-size="102400"
-          @oversize="logContent('oversize')"
-          :before-read="beforeRead(1)"
-        >
-          <van-icon name="photograph" />
-        </van-uploader>
-      </div>
     </demo-block>
 
-    <demo-block :title="$t('name')">
+    <demo-block :title="$t('uploadStyle')">
-      <div class="demo-uploader-container">
+      <van-uploader>
-        <van-uploader
+        <van-button
-          name="uploader"
+          type="primary"
-          :after-read="toastName"
+          icon="photo"
         >
-          <van-icon name="photograph" />
+          {{ this.$t('upload') }}
-        </van-uploader>
+        </van-button>
-      </div>
+      </van-uploader>
     </demo-block>
   </demo-section>
 </template>
@@ -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 {
 
 <style lang="less">
 .demo-uploader {
-  &-container {
+  background-color: #fff;
-    padding: 10px 20px;
+
-    font-size: 20px;
+  .van-uploader {
+    margin-left: 15px;
   }
 }
 </style>

packages/uploader/en-US.md

@@ -13,11 +13,7 @@ Vue.use(Uploader);
 ### Basic Usage
 
 ```html
-<div class="uploader-container">
+<van-uploader :after-read="onRead" />
-  <van-uploader :after-read="onRead">
-    <van-icon name="photograph" />
-  </van-uploader>
-</div>
 ```
 
 ```javascript
@@ -30,24 +26,14 @@ export default {
 };
 ```
 
-### Name
+### Upload Style
 
 ```html
-<van-uploader name="uploader" :after-read="onRead">
+<van-uploader :after-read="onRead">
-  <van-icon name="photograph" />
+  <van-button icon="photo" type="primary">Upload Image</van-button>
 </van-uploader>
 ```
 
-```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
 

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(
+          this.onAfterRead({ file: files, content }, files.size > this.maxSize);
-            { file: files, content },
-            files.size > this.maxSize
-          );
         });
       }
     },
@@ -103,16 +102,28 @@ export default sfc({
   },
 
   render(h) {
-    const {
+    const { slots, accept, disabled, uploadText } = this;
-      accept,
+
-      disabled
+    function Upload() {
-    } = this;
+      const slot = slots();
+
+      if (slot) {
+        return slot;
+      }
+
+      return (
+        <div class={bem('upload')}>
+          <Icon name="plus" class={bem('upload-icon')} />
+          {uploadText && <span class={bem('upload-text')}>{uploadText}</span>}
+        </div>
+      );
+    }
 
     return (
       <div class={bem()}>
-        {this.slots()}
+        {Upload()}
         <input
-          { ...{ attrs: this.$attrs } }
+          {...{ attrs: this.$attrs }}
           ref="input"
           type="file"
           accept={accept}

packages/uploader/index.less

@@ -14,4 +14,27 @@
     cursor: pointer;
     opacity: 0;
   }
+
+  &__upload {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 80px;
+    height: 80px;
+    background-color: @white;
+    border: 1px dashed @gray-light;
+
+    &-icon {
+      color: @gray-dark;
+      font-size: 24px;
+    }
+
+    &-text {
+      margin-top: 10px;
+      color: @gray-dark;
+      font-size: 12px;
+    }
+  }
 }

packages/uploader/test/__snapshots__/demo.spec.js.snap

@@ -3,16 +3,16 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="demo-uploader-container">
+    <div class="van-uploader">
-      <div class="van-uploader"><i class="van-icon van-icon-photograph">
+      <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
-          <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
+          <!----></i></div><input type="file" accept="image/*" class="van-uploader__input">
     </div>
   </div>
   <div>
-    <div class="demo-uploader-container">
+    <div class="van-uploader"><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-photo van-button__icon">
-      <div class="van-uploader"><i class="van-icon van-icon-photograph">
+          <!----></i><span class="van-button__text">
-          <!----></i><input name="uploader" type="file" accept="image/*" class="van-uploader__input"></div>
+        上传图片
-    </div>
+      </span></button><input type="file" accept="image/*" class="van-uploader__input"></div>
   </div>
 </div>
 `;

packages/uploader/zh-CN.md

@@ -13,9 +13,7 @@ Vue.use(Uploader);
 ### 基础用法
 
 ```html
-<van-uploader :after-read="onRead">
+<van-uploader :after-read="onRead" />
-  <van-icon name="photograph" />
-</van-uploader>
 ```
 
 ```javascript
@@ -28,24 +26,14 @@ export default {
 };
 ```
 
-### 标识名称
+### 自定义上传样式
 
 ```html
-<van-uploader name="uploader" :after-read="onRead">
+<van-uploader :after-read="onRead">
-  <van-icon name="photograph" />
+  <van-button icon="photo" type="primary">上传图片</van-button>
 </van-uploader>
 ```
 
-```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 |
+| disabled | 是否禁用图片上传 | `Boolean` | `false` | - |
-| before-read | 读取前的回调函数，返回 false 可终止文件读取 | `Function` | - | - |
+| capture | 图片选取模式，可选值为`camera`(直接调起摄像头) | `String` | - | 2.0.0 |
-| after-read | 读取完成后的回调函数 | `Function` | - | - |
+| before-read | 文件读取前的回调函数，返回`false`可终止文件读取 | `Function` | - | - |
-| max-size | 文件大小限制，单位为 byte | `Number` | - | - |
+| 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 回调参数