Merge branch 'feature/uploader' into 'master'

Feature/uploader



See merge request !11

components.json

@@ -31,6 +31,8 @@
   "actionsheet": "./packages/actionsheet/index.js",
   "quantity": "./packages/quantity/index.js",
   "progress": "./packages/progress/index.js",
+  "uploader": "./packages/uploader/index.js",
   "swipe": "./packages/swipe/index.js",
   "swipe-item": "./packages/swipe-item/index.js"
+
 }

docs/examples-docs/uploader.md

@@ -0,0 +1,54 @@
+<style>
+.uploader-container {
+  padding: 5px 15px;
+}
+</style>
+<script>
+export default {
+  methods: {
+    logContent(file) {
+      console.log(file)
+    }
+  }
+};  
+</script>
+## Uploader 组件
+
+### 基础用法
+
+:::demo 基础用法
+```html
+<div class="uploader-container">
+    <zan-uploader 
+        :before-read="logContent"
+        @file-readed="logContent">
+    </zan-uploader>
+</div>
+```
+:::
+### 自定义上传图标
+:::demo 自定义上传图标
+```html
+<div class="uploader-container">
+  <zan-uploader @file-readed="logContent">
+    <zan-icon name="camera"></zan-icon>
+  </zan-uploader>
+</div>
+```
+:::
+
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | String  | 'dataUrl'          | 'dataUrl','text'          |
+| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | boolean  | false          |           |
+| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | Function  |           |  |
+| file-readed | 文件读完之后出发此事件，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | Function  |           |  |
+
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| - | 自定义上传显示图标 |

docs/nav.config.json

@@ -106,8 +106,8 @@
               "title": "Toast"
             },
             {
-              "path": "/img-uploader",
+              "path": "/uploader",
-              "title": "Img Uploader"
+              "title": "Uploader"
             },
             {
               "path": "/picker",

packages/uploader/index.js

@@ -0,0 +1,3 @@
+import Uploader from './src/main';
+
+export default Uploader;

packages/uploader/src/main.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="zan-uploader">
+        <slot>
+          <div>
+             <zan-button block>上传文件</zan-button>
+          </div>
+        </slot>
+        <input type="file" @change="onValueChange"  class="zan-uploader__input" ref="input" />
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'zan-uploader',
+    props: {
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      beforeRead: Function,
+      resultType: {
+        type: String,
+        default: 'dataUrl',
+        validator (value) {
+          return value == 'dataUrl' || value == 'text'
+        }
+      }
+    },
+    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.$emit('file-readed',
+            {
+              name:file.name,
+              type:file.type,
+              size:file.size,
+              content:e.target.result
+            });
+          this.$refs.input.value = '';
+        };
+
+        if (this.resultType == 'dataUrl') {
+          reader.readAsDataURL(file);
+        } else if (this.resultType == 'text') {
+          reader.readAsText(file);
+        } 
+
+      }
+    }
+  };
+</script>

packages/zanui-css/src/index.css

@@ -25,4 +25,6 @@
 @import './actionsheet.css';
 @import './quantity.css';
 @import './progress.css';
+@import './uploader.css';
 @import './swipe.css';
+

packages/zanui-css/src/uploader.css

@@ -0,0 +1,24 @@
+
+@component-namespace zan {
+    @b uploader {
+        position: relative;
+        display: inline-block;
+
+        @e input {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            display: block;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            cursor:pointer;
+        }
+
+        input[type="file" i]::-webkit-file-upload-button {
+            cursor:pointer;
+        }
+    }
+}

src/index.js

@@ -30,6 +30,7 @@ import Row from '../packages/row/index.js';
 import Actionsheet from '../packages/actionsheet/index.js';
 import Quantity from '../packages/quantity/index.js';
 import Progress from '../packages/progress/index.js';
+import Uploader from '../packages/uploader/index.js';
 import Swipe from '../packages/swipe/index.js';
 import SwipeItem from '../packages/swipe-item/index.js';
 
@@ -64,6 +65,7 @@ const install = function(Vue) {
   Vue.component(Actionsheet.name, Actionsheet);
   Vue.component(Quantity.name, Quantity);
   Vue.component(Progress.name, Progress);
+  Vue.component(Uploader.name, Uploader);
   Vue.component(Swipe.name, Swipe);
   Vue.component(SwipeItem.name, SwipeItem);
 };
@@ -108,6 +110,7 @@ module.exports = {
   Actionsheet,
   Quantity,
   Progress,
+  Uploader,
   Swipe,
   SwipeItem
 };