From 075f3290b4af38cb2b46770d375926d2b1ef467c Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 28 Nov 2017 10:43:09 +0800
Subject: [PATCH] [new feature] Uploader support inherit attrs (#357)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [bugfix] Search box-sizing wrong

* [Doc] update vant-demo respo

* [Doc] translate theme & demo pages

* [Doc] add Internationalization document

* [bugfix] remove unnecessary props

* [fix] optimize clickoutside

* [new feature] optimize find-parent

* [new feature]: change document title accordinng to language

* [new feature] Pagination code review

* [improvement] adjust icon-font unicode

* [improvement] Icon spinner color inherit

* [improvement] icon default width

* [bugfix] DateTimePicker validate date props

* [bugfix] Tab item text ellipsis

* [improvement] optimize single line ellipsis

* [Improvement] optimzie staticClass

* [Improvement] Button: use sfc instread of jsx

* [Improvement] update actionsheet close icon style

* fix: yarn.lock

* fix: icon test cases

* [bugfix] errors during ssr

* [Improvement] SubmitBar add left slot

* [new feature] ImagePreview support manually close

* fix: ImagePreview test case

* [Doc] add switch lang button in mobile

* [bugfix] Popup overlay style update

* [bugfix] NavBar click event

* [Improvement] optimize build speed

* [new feature] CellSwipe support async controll

* [new feature] Uploader support inherit attrs
---
 docs/demos/views/uploader.vue   | 18 +++++++++++++++++-
 docs/markdown/en-US/uploader.md | 11 ++++++++++-
 docs/markdown/zh-CN/uploader.md | 11 ++++++++++-
 packages/uploader/index.vue     |  9 ++++++++-
 4 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/docs/demos/views/uploader.vue b/docs/demos/views/uploader.vue
index 15b972f15..9ab039be2 100644
--- a/docs/demos/views/uploader.vue
+++ b/docs/demos/views/uploader.vue
@@ -7,11 +7,28 @@
         </van-uploader>
       </div>
     </demo-block>
+
+    <demo-block :title="$t('title2')">
+      <div class="demo-uploader-container">
+        <van-uploader :after-read="logContent" accept="image/gif, image/jpeg">
+          <van-icon name="photograph" />
+        </van-uploader>
+      </div>
+    </demo-block>
   </demo-section>
 </template>
 
 <script>
 export default {
+  i18n: {
+    'zh-CN': {
+      title2: '设置 input 属性'
+    },
+    'en-US': {
+      title2: 'Set input attr'
+    }
+  },
+
   methods: {
     logContent(file) {
       console.log(file);
@@ -20,7 +37,6 @@ export default {
 };
 </script>
 
-
 <style lang="postcss">
 .demo-uploader {
   &-container {
diff --git a/docs/markdown/en-US/uploader.md b/docs/markdown/en-US/uploader.md
index b3becdc98..4ece35ebe 100644
--- a/docs/markdown/en-US/uploader.md
+++ b/docs/markdown/en-US/uploader.md
@@ -14,7 +14,7 @@ Vue.component(Uploader.name, Uploader);
 ```html
 <div class="uploader-container">
   <van-uploader :afterRead="logContent">
-    <van-icon name="photograph"></van-icon>
+    <van-icon name="photograph" />
   </van-uploader>
 </div>
 ```
@@ -29,6 +29,15 @@ export default {
 };
 ```
 
+#### Set input attr
+You can set native properties such as `accpet` on Uploader, and the input will automatically inherits the attribute.
+
+```html
+<van-uploader :afterRead="logContent" accept="image/gif, image/jpeg">
+  <van-icon name="photograph" />
+</van-uploader>
+```
+
 ### API
 
 | Attribute | Description | Type | Default | Accepted Values |
diff --git a/docs/markdown/zh-CN/uploader.md b/docs/markdown/zh-CN/uploader.md
index a90dd6833..9ff9a621b 100644
--- a/docs/markdown/zh-CN/uploader.md
+++ b/docs/markdown/zh-CN/uploader.md
@@ -13,7 +13,7 @@ Vue.component(Uploader.name, Uploader);
 
 ```html
 <van-uploader :afterRead="logContent">
-  <van-icon name="photograph"></van-icon>
+  <van-icon name="photograph" />
 </van-uploader>
 ```
 
@@ -27,6 +27,15 @@ export default {
 };
 ```
 
+#### 设置 Input 属性
+可以直接在 Uploader 上设置 accpet 等原生属性，input 会自动继承该属性
+
+```html
+<van-uploader :afterRead="logContent" accept="image/gif, image/jpeg">
+  <van-icon name="photograph" />
+</van-uploader>
+```
+
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
diff --git a/packages/uploader/index.vue b/packages/uploader/index.vue
index 32cbbe594..cd38aeb48 100644
--- a/packages/uploader/index.vue
+++ b/packages/uploader/index.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="van-uploader">
     <slot></slot>
-    <input type="file" @change="onValueChange" :disabled="disabled" class="van-uploader__input" ref="input" />
+    <input
+      ref="input"
+      type="file"
+      class="van-uploader__input"
+      v-bind="$attrs"
+      :disabled="disabled"
+      @change="onValueChange"
+    />
   </div>
 </template>