From 99259a863f54a439572fb850b75c5bb9d515b06c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 14:25:22 +0800
Subject: [PATCH 1/5] Doc: add touch simulator

---
 docs/src/doc.config.js | 10 +++++-----
 docs/src/examples.js   |  1 +
 package.json           |  6 +++---
 yarn.lock              | 24 ++++++++++++------------
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index 110f0cadb..655038e57 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -26,21 +26,21 @@ module.exports = {
                 "title": "快速上手",
                 noExample: true
               },
+              {
+                "title": "业务组件",
+                "link": "/zanui/captain/component/quickstart"
+              },
               {
                 "path": "/changelog",
                 "title": "更新日志",
                 noExample: true
-              },
-              {
-                "title": "业务组件",
-                "link": "/zanui/captain/component/quickstart"
               }
             ]
           }
         ]
       },
       {
-        "name": "组件列表",
+        "name": "组件",
         "showInMobile": true,
         "groups": [
           {
diff --git a/docs/src/examples.js b/docs/src/examples.js
index 73f943ae6..5126b64c3 100644
--- a/docs/src/examples.js
+++ b/docs/src/examples.js
@@ -5,6 +5,7 @@ import routes from './router.config';
 import ZanUI from 'packages/index';
 import ZanDoc from 'zan-doc';
 import 'packages/vant-css/src/index.css';
+import 'zan-doc/src/helper/touch-simulator';
 
 import DemoList from './components/demo-list.vue';
 
diff --git a/package.json b/package.json
index 706d14a9f..f6ff3a9f2 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.5",
     "eslint-plugin-vue": "^2.1.0",
-    "extract-text-webpack-plugin": "2.1.2",
+    "extract-text-webpack-plugin": "^3.0.0",
     "felint": "^0.5.0-alpha.3",
     "file-loader": "^0.11.2",
     "file-save": "^0.2.0",
@@ -108,7 +108,7 @@
     "vue": "^2.4.2",
     "vue-html-loader": "^1.2.4",
     "vue-loader": "^13.0.4",
-    "vue-markdown-loader": "^2.0.0",
+    "vue-markdown-loader": "^2.1.0",
     "vue-router": "^2.7.0",
     "vue-sfc-compiler": "^0.0.2",
     "vue-style-loader": "^3.0.0",
@@ -116,6 +116,6 @@
     "webpack": "^3.5.5",
     "webpack-dev-server": "^2.7.1",
     "webpack-merge": "^4.1.0",
-    "zan-doc": "^0.2.1"
+    "zan-doc": "^0.2.2"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index f546eae28..de34d1c02 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -305,7 +305,7 @@ async@2.1.4:
   dependencies:
     lodash "^4.14.0"
 
-async@^2.1.2:
+async@^2.1.2, async@^2.4.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
@@ -2768,12 +2768,12 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
-extract-text-webpack-plugin@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.1.2.tgz#756ef4efa8155c3681833fbc34da53b941746d6c"
+extract-text-webpack-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.0.tgz#90caa7907bc449f335005e3ac7532b41b00de612"
   dependencies:
-    async "^2.1.2"
-    loader-utils "^1.0.2"
+    async "^2.4.1"
+    loader-utils "^1.1.0"
     schema-utils "^0.3.0"
     webpack-sources "^1.0.1"
 
@@ -7603,9 +7603,9 @@ vue-loader@^13.0.4:
     vue-style-loader "^3.0.0"
     vue-template-es2015-compiler "^1.5.3"
 
-vue-markdown-loader@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/vue-markdown-loader/-/vue-markdown-loader-2.0.0.tgz#d3cadbf9c8976a81f2d5e39496d505fd4f31bc96"
+vue-markdown-loader@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/vue-markdown-loader/-/vue-markdown-loader-2.1.0.tgz#112d1921dd56daa29906b7c012623c6c5d6e0d8c"
   dependencies:
     cheerio "^0.20.0"
     highlight.js "^9.4.0"
@@ -7926,9 +7926,9 @@ yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
-zan-doc@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.1.tgz#34723ea180d0ac2e183b66d2a3e4a04b4f6fe91b"
+zan-doc@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.2.tgz#ebf8ffda5bd3cf9277cc3e59c48476a3fbf84d9f"
   dependencies:
     cheerio "0.22.0"
     decamelize "^1.2.0"

From ac4b739814bb11c848ed1de00f8b3a05426a7a8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 14:38:22 +0800
Subject: [PATCH 2/5] Uploader: optimize template

---
 packages/uploader/index.vue | 89 ++++++++++++++++++-------------------
 1 file changed, 43 insertions(+), 46 deletions(-)

diff --git a/packages/uploader/index.vue b/packages/uploader/index.vue
index b0b8d4ede..59d120bbc 100644
--- a/packages/uploader/index.vue
+++ b/packages/uploader/index.vue
@@ -1,57 +1,54 @@
 <template>
   <div class="van-uploader">
     <slot></slot>
-    <template v-if="disabled">
-      <input type="file" @change="onValueChange" disabled="disabled" class="van-uploader__input" />
-    </template>
-    <template v-else>
-      <input type="file" @change="onValueChange"  class="van-uploader__input" ref="input" />
-    </template>
+    <input type="file" @change="onValueChange" :disabled="disable" class="van-uploader__input" ref="input" />
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'van-uploader',
-    props: {
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      beforeRead: Function,
-      afterRead: Function,
-      resultType: {
-        type: String,
-        default: 'dataUrl',
-        validator(value) {
-          return value === 'dataUrl' || value === 'text';
-        }
-      }
+export default {
+  name: 'van-uploader',
+
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
     },
-    methods: {
-      onValueChange(event) {
-        if (this.disabled) {
-          return;
-        }
-        var files = event.target.files;
-        var file = files[0];
-        if (!file) return;
-        if (this.beforeRead && !this.beforeRead(file)) return;
-        var reader = new FileReader();
-        reader.onload = (e) => {
-          this.afterRead && this.afterRead(
-            {
-              file: file,
-              content: e.target.result
-            });
-          this.$refs.input && (this.$refs.input.value = '');
-        };
-        if (this.resultType === 'dataUrl') {
-          reader.readAsDataURL(file);
-        } else if (this.resultType === 'text') {
-          reader.readAsText(file);
-        }
+    beforeRead: Function,
+    afterRead: Function,
+    resultType: {
+      type: String,
+      default: 'dataUrl',
+      validator: value => value === 'dataUrl' || value === 'text'
+    }
+  },
+
+  methods: {
+    onValueChange(event) {
+      if (this.disable) {
+        return;
+      }
+
+      const file = event.target.files[0];
+      if (!file || (this.beforeRead && !this.beforeRead(file))) {
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        this.afterRead && this.afterRead({
+          file,
+          content: e.target.result
+        });
+        this.$refs.input && (this.$refs.input.value = '');
+      };
+
+      if (this.resultType === 'dataUrl') {
+        reader.readAsDataURL(file);
+      } else if (this.resultType === 'text') {
+        reader.readAsText(file);
       }
     }
-  };
+  }
+};
 </script>

From 5b1e27073deb96c8fffc952857d3cb9f192e16cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 15:07:00 +0800
Subject: [PATCH 3/5] Progress: optimzie dom struct

---
 docs/examples-docs/progress.md     | 63 ++++++++++--------------------
 packages/progress/index.vue        | 53 +++++++------------------
 packages/vant-css/src/progress.css | 45 ++++++++++-----------
 3 files changed, 55 insertions(+), 106 deletions(-)

diff --git a/docs/examples-docs/progress.md b/docs/examples-docs/progress.md
index efb9a2993..917183190 100644
--- a/docs/examples-docs/progress.md
+++ b/docs/examples-docs/progress.md
@@ -1,13 +1,11 @@
 <style>
 .demo-progress {
-  &__wrapper {
-    padding: 5px;
+  .van-progress {
     margin: 20px 10px;
   }
 } 
 </style>
 
-
 ## Progress 进度条
 
 ### 使用指南
@@ -21,57 +19,37 @@ Vue.component(Progress.name, Progress);
 
 #### 基础用法
 
-默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。
+进度条默认为蓝色，使用`percentage`属性来设置当前进度
 
 :::demo 基础用法
 ```html
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
-</div>
+<van-progress :percentage="0"></van-progress>
+<van-progress :percentage="46"></van-progress>
+<van-progress :percentage="100"></van-progress>
 ```
 :::
 
 
-#### Inactive
+#### 进度条置灰
 
-是否置灰进度条，一般用于进度条被取消时。
-
-:::demo Inactive
+:::demo 进度条置灰
 ```html
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" inactive :percentage="0"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo2" inactive :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" inactive :percentage="100"></van-progress>
-</div>
+<van-progress inactive :percentage="0"></van-progress>
+<van-progress inactive :percentage="46"></van-progress>
+<van-progress inactive :percentage="100"></van-progress>
 ```
 :::
 
 
-#### 自定义颜色和文字
+#### 样式定制
 
 可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
 
-:::demo 自定义颜色和文字
+:::demo 样式定制
 ```html
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
-</div>
+<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
+<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
+<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
 ```
 :::
 
@@ -79,9 +57,8 @@ Vue.component(Progress.name, Progress);
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| inactive | 是否置灰 | `boolean`  | `false`          | `true`, `false`    |
-| percentage | 进度百分比 | `number`  | `false`          | `0-100`    |
-| pivotText | 文字显示 | `string`  | 百分比文字          | -   |
-| color | 进度条颜色 | `string`  | `#38f`    | hexvalue   |
-| textColor | 进度条文字颜色 | `string`  | `#fff`    | hexvalue   |
-
+| inactive | 是否置灰 | `boolean` | `false` | |
+| percentage | 进度百分比 | `number` | `false` | `0-100` |
+| pivotText | 文字显示 | `string` | 百分比文字 | - |
+| color | 进度条颜色 | `string` | `#38f` | hexvalue |
+| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
diff --git a/packages/progress/index.vue b/packages/progress/index.vue
index 4e89cfd58..685a46135 100644
--- a/packages/progress/index.vue
+++ b/packages/progress/index.vue
@@ -1,27 +1,11 @@
 <template>
   <div class="van-progress">
-    <div class="van-progress__bar">
-      <span class="van-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
-      <span class="van-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
-    </div>
+    <span class="van-progress__portion" :style="portionStyle"></span>
+    <span class="van-progress__pivot" :style="pivotStyle">{{ pivotText }}</span>
   </div>
 </template>
 
 <script>
-/**
- * van-progress
- * @module components/progress
- * @desc 开关
- * @param {boolean} [inactive=false] - 是否置灰
- * @param {number} [percentage=0] - 进度百分比
- * @param {string} [pivotText=percentage] - 进度条显示文字
- * @param {string} [color='#38f'] - 进度条颜色
- * @param {string} [textColor='#fff'] - 进度条文字颜色
- *
- * @example
- * <van-switch checked="true" disabled="false"></van-switch>
- */
-
 const DEFAULT_COLOR = '#38f';
 const DEFAULT_TEXT_COLOR = '#fff';
 const INACTIVE_COLOR = '#cacaca';
@@ -33,14 +17,12 @@ export default {
     percentage: {
       type: Number,
       required: true,
-      validator(value) {
-        return value <= 100 && value >= 0;
-      }
+      validator: value => value >= 0 && value <= 100
     },
     inactive: Boolean,
     pivotText: {
       type: String,
-      default: function() {
+      default() {
         return this.percentage + '%';
       }
     },
@@ -59,24 +41,19 @@ export default {
       return this.inactive ? INACTIVE_COLOR : this.color;
     },
     pivotStyle() {
-      const pivotStyle = {
-        backgroundColor: this.componentColor,
+      const { percentage } = this;
+      return {
         color: this.textColor,
-        left: this.percentage + '%',
-        marginLeft: '-14px'
+        backgroundColor: this.componentColor,
+        left: percentage <= 5 ? '0%' : percentage >= 95 ? '100%' : percentage + '%',
+        marginLeft: percentage <= 5 ? '0' : percentage >= 95 ? '-28px' : '-14px'
+      };
+    },
+    portionStyle() {
+      return {
+        width: this.percentage + '%',
+        backgroundColor: this.componentColor
       };
-      if (this.percentage <= 5) {
-        pivotStyle.left = '0%';
-        pivotStyle.marginLeft = '0';
-      } else if (this.percentage >= 95) {
-        pivotStyle.left = '100%';
-        pivotStyle.marginLeft = '-28px';
-      } else {
-        pivotStyle.left = this.percentage + '%';
-        pivotStyle.marginLeft = '-14px';
-      }
-
-      return pivotStyle;
     }
   }
 };
diff --git a/packages/vant-css/src/progress.css b/packages/vant-css/src/progress.css
index a087660fb..645d7db64 100644
--- a/packages/vant-css/src/progress.css
+++ b/packages/vant-css/src/progress.css
@@ -1,32 +1,27 @@
 @import './common/var.css';
 
 .van-progress {
-  &__bar {
-    height: 4px;
-    border-radius: 4.5px;
-    width: 100%;
-    background: $c-gray-light;
-    position: relative;
+  height: 4px;
+  position: relative;
+  border-radius: 4px;
+  background: $c-gray-light;
 
-    &__finished-portion {
-      border-radius: 4.5px;
-      height: 100%;
-      position: absolute;
-      left: 0;
-      display: inline-block;
-    }
+  &__portion {
+    left: 0;
+    height: 100%;
+    position: absolute;
+    border-radius: 4px;
+  }
 
-    &__pivot {
-      padding: 2px 0;
-      font-size: 8px;
-      position: absolute;
-      border-radius: 6px;
-      width: 28px;
-      background-color: $c-gray-light;
-      line-height: 8px;
-      text-align: center;
-      top: 50%;
-      transform: translate3d(0, -50%, 0);
-    }
+  &__pivot {
+    top: 50%;
+    width: 28px;
+    font-size: 8px;
+    margin-top: -6px;
+    position: absolute;
+    border-radius: 6px;
+    line-height: 12px;
+    text-align: center;
+    background-color: $c-gray-light;
   }
 }

From 14085f5facbe46bd194b588f33ee2f447aa6dc00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 15:13:11 +0800
Subject: [PATCH 4/5] fix: progress test cases

---
 package.json                     |  2 +-
 test/unit/specs/progress.spec.js |  4 ++--
 yarn.lock                        | 29 ++++++++++++++++++++---------
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index f6ff3a9f2..f51ff75c3 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.5",
     "eslint-plugin-vue": "^2.1.0",
-    "extract-text-webpack-plugin": "^3.0.0",
+    "extract-text-webpack-plugin": "2.0.0",
     "felint": "^0.5.0-alpha.3",
     "file-loader": "^0.11.2",
     "file-save": "^0.2.0",
diff --git a/test/unit/specs/progress.spec.js b/test/unit/specs/progress.spec.js
index 69b6cf763..d70226746 100644
--- a/test/unit/specs/progress.spec.js
+++ b/test/unit/specs/progress.spec.js
@@ -9,8 +9,8 @@ describe('Progress', () => {
     wrapper = mount(Progress, {
       propsData: propsData
     });
-    bar = wrapper.find('.van-progress__bar__finished-portion')[0];
-    pivot = wrapper.find('.van-progress__bar__pivot')[0];
+    bar = wrapper.find('.van-progress__portion')[0];
+    pivot = wrapper.find('.van-progress__pivot')[0];
   };
 
   afterEach(() => {
diff --git a/yarn.lock b/yarn.lock
index de34d1c02..28f96953e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -67,7 +67,7 @@ ajv-keywords@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
 
-ajv@^4.7.0, ajv@^4.9.1:
+ajv@^4.11.2, ajv@^4.7.0, ajv@^4.9.1:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
   dependencies:
@@ -305,7 +305,7 @@ async@2.1.4:
   dependencies:
     lodash "^4.14.0"
 
-async@^2.1.2, async@^2.4.1:
+async@^2.1.2:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
@@ -2768,14 +2768,14 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
-extract-text-webpack-plugin@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.0.tgz#90caa7907bc449f335005e3ac7532b41b00de612"
+extract-text-webpack-plugin@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.0.0.tgz#8640f72609800a3528f13a2a9634d566a5c1ae60"
   dependencies:
-    async "^2.4.1"
-    loader-utils "^1.1.0"
-    schema-utils "^0.3.0"
-    webpack-sources "^1.0.1"
+    ajv "^4.11.2"
+    async "^2.1.2"
+    loader-utils "^1.0.2"
+    webpack-sources "^0.1.0"
 
 extract-zip@~1.6.5:
   version "1.6.5"
@@ -6816,6 +6816,10 @@ source-list-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
 
+source-list-map@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.npmjs.org/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+
 source-map-support@^0.4.15:
   version "0.4.16"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.16.tgz#16fecf98212467d017d586a2af68d628b9421cd8"
@@ -7707,6 +7711,13 @@ webpack-merge@^4.1.0:
   dependencies:
     lodash "^4.17.4"
 
+webpack-sources@^0.1.0:
+  version "0.1.5"
+  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-0.1.5.tgz#aa1f3abf0f0d74db7111c40e500b84f966640750"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.5.3"
+
 webpack-sources@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"

From c7b96bd8e0dbd26fe22c821365fd4431097e0b5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 15:27:56 +0800
Subject: [PATCH 5/5] Progress: fix disable prop

---
 packages/uploader/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/uploader/index.vue b/packages/uploader/index.vue
index 59d120bbc..8e7e0cc42 100644
--- a/packages/uploader/index.vue
+++ b/packages/uploader/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="van-uploader">
     <slot></slot>
-    <input type="file" @change="onValueChange" :disabled="disable" class="van-uploader__input" ref="input" />
+    <input type="file" @change="onValueChange" :disabled="disabled" class="van-uploader__input" ref="input" />
   </div>
 </template>
 
@@ -10,7 +10,7 @@ export default {
   name: 'van-uploader',
 
   props: {
-    disable: {
+    disabled: {
       type: Boolean,
       default: false
     },
@@ -25,7 +25,7 @@ export default {
 
   methods: {
     onValueChange(event) {
-      if (this.disable) {
+      if (this.disabled) {
         return;
       }