uploader

packages/uploader/index.js

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

packages/uploader/src/main.vue

@@ -0,0 +1,59 @@
+<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,3 +25,4 @@
 @import './actionsheet.css';
 @import './quantity.css';
 @import './progress.css';
+@import './uploader.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;
+        }
+    }
+}