From 7d5b336face81afa599137d98fd6cf314d723438 Mon Sep 17 00:00:00 2001 From: taiyong Date: Tue, 14 Mar 2017 18:00:39 +0800 Subject: [PATCH 1/3] uploader --- components.json | 4 +- docs/examples-docs/uploader.md | 54 ++++++++++++++++++++++++++ docs/nav.config.json | 4 +- packages/uploader/index.js | 3 ++ packages/uploader/src/main.vue | 59 +++++++++++++++++++++++++++++ packages/zanui-css/src/index.css | 1 + packages/zanui-css/src/uploader.css | 24 ++++++++++++ src/index.js | 5 ++- 8 files changed, 150 insertions(+), 4 deletions(-) create mode 100644 docs/examples-docs/uploader.md create mode 100644 packages/uploader/index.js create mode 100644 packages/uploader/src/main.vue create mode 100644 packages/zanui-css/src/uploader.css diff --git a/components.json b/components.json index 2501d6f64..86361bc92 100644 --- a/components.json +++ b/components.json @@ -30,5 +30,7 @@ "row": "./packages/row/index.js", "actionsheet": "./packages/actionsheet/index.js", "quantity": "./packages/quantity/index.js", - "progress": "./packages/progress/index.js" + "progress": "./packages/progress/index.js", + "uploader": "./packages/uploader/index.js" + } diff --git a/docs/examples-docs/uploader.md b/docs/examples-docs/uploader.md new file mode 100644 index 000000000..193714197 --- /dev/null +++ b/docs/examples-docs/uploader.md @@ -0,0 +1,54 @@ + + +## Uploader 组件 + +### 基础用法 + +:::demo 基础用法 +```html +
+ + +
+``` +::: +### 自定义上传图标 +:::demo 自定义上传图标 +```html +
+ + + +
+``` +::: + + +### 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 | 描述 | +|-----------|-----------| +| - | 自定义上传显示图标 | diff --git a/docs/nav.config.json b/docs/nav.config.json index bee4487f5..68dc4d62e 100644 --- a/docs/nav.config.json +++ b/docs/nav.config.json @@ -106,8 +106,8 @@ "title": "Toast" }, { - "path": "/img-uploader", - "title": "Img Uploader" + "path": "/uploader", + "title": "Uploader" }, { "path": "/picker", diff --git a/packages/uploader/index.js b/packages/uploader/index.js new file mode 100644 index 000000000..923a084e7 --- /dev/null +++ b/packages/uploader/index.js @@ -0,0 +1,3 @@ +import Uploader from './src/main'; + +export default Uploader; diff --git a/packages/uploader/src/main.vue b/packages/uploader/src/main.vue new file mode 100644 index 000000000..232c1d570 --- /dev/null +++ b/packages/uploader/src/main.vue @@ -0,0 +1,59 @@ + + + diff --git a/packages/zanui-css/src/index.css b/packages/zanui-css/src/index.css index 9dbed8807..b7867da34 100644 --- a/packages/zanui-css/src/index.css +++ b/packages/zanui-css/src/index.css @@ -25,3 +25,4 @@ @import './actionsheet.css'; @import './quantity.css'; @import './progress.css'; +@import './uploader.css'; diff --git a/packages/zanui-css/src/uploader.css b/packages/zanui-css/src/uploader.css new file mode 100644 index 000000000..d451b6caa --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 04f0431c6..ae6f1495a 100644 --- a/src/index.js +++ b/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'; const install = function(Vue) { if (install.installed) return; @@ -62,6 +63,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); }; // auto install @@ -103,5 +105,6 @@ module.exports = { Row, Actionsheet, Quantity, - Progress + Progress, + Uploader }; From c1e1abd158efd220f96fb30476ea5367da47845d Mon Sep 17 00:00:00 2001 From: taiyong Date: Tue, 14 Mar 2017 18:03:05 +0800 Subject: [PATCH 2/3] uploader --- packages/uploader/src/main.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/uploader/src/main.vue b/packages/uploader/src/main.vue index 232c1d570..5c17f7f25 100644 --- a/packages/uploader/src/main.vue +++ b/packages/uploader/src/main.vue @@ -38,6 +38,7 @@ if (this.beforeRead && ! this.beforeRead(file)) return; var reader = new FileReader(); + reader.onload = (e) => { this.$emit('file-readed', { @@ -48,11 +49,13 @@ }); this.$refs.input.value = ''; }; + if (this.resultType == 'dataUrl') { reader.readAsDataURL(file); } else if (this.resultType == 'text') { reader.readAsText(file); } + } } }; From b235b9ac7b1acbdc8ff97cd49dc15b526a7b7ebc Mon Sep 17 00:00:00 2001 From: taiyong Date: Tue, 14 Mar 2017 18:03:28 +0800 Subject: [PATCH 3/3] uploader --- packages/uploader/src/main.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/uploader/src/main.vue b/packages/uploader/src/main.vue index 5c17f7f25..1bcec4541 100644 --- a/packages/uploader/src/main.vue +++ b/packages/uploader/src/main.vue @@ -28,9 +28,11 @@ }, methods: { onValueChange (event) { + if (this.disabled) { return; } + var files = event.target.files; var file = files[0]; if (!file) return; @@ -55,7 +57,7 @@ } else if (this.resultType == 'text') { reader.readAsText(file); } - + } } };