From 5d08ddf27c645dda35a7447a1a6b2790bee23023 Mon Sep 17 00:00:00 2001 From: 梁灏 Date: Thu, 2 Mar 2017 14:41:28 +0800 Subject: [PATCH] support Progress & Upload --- CHANGE.md | 6 +++++- README.md | 4 ++-- src/components/progress/progress.vue | 24 +++++++++++++++++------- src/components/upload/upload-list.vue | 16 ++++++++-------- src/components/upload/upload.vue | 11 ++++++----- src/index.js | 8 ++++---- test/app.vue | 2 ++ test/main.js | 8 ++++++++ test/routers/progress.vue | 37 +++++++++++++++++++++++++++++++++++++ test/routers/upload.vue | 82 +++++++++++++++++++++++++++++++++++++++++++++++----------------------------------- 10 files changed, 136 insertions(+), 62 deletions(-) create mode 100644 test/routers/progress.vue diff --git a/CHANGE.md b/CHANGE.md index ddc25d7..ae0184a 100644 --- a/CHANGE.md +++ b/CHANGE.md @@ -13,4 +13,8 @@ value 改为了 label，使用 v-model，废弃 checked ### Badge class 改为了 className ### InputNumber -使用 v-model \ No newline at end of file +使用 v-model +### Progress (名称有警告) +新增 on-status-change 事件 +### Upload +父级不能 computed Upload 的 fileList 了 \ No newline at end of file diff --git a/README.md b/README.md index 2d14427..eea0dc9 100644 --- a/README.md +++ b/README.md @@ -33,14 +33,14 @@ - [ ] Transfer - [x] InputNumber - [ ] Rate -- [ ] Upload +- [x] Upload - [ ] Form - [x] Alert - [ ] Card - [ ] Message - [ ] Notice - [ ] Modal -- [ ] Progress +- [x] Progress - [x] Badge - [ ] Collapse - [x] Timeline diff --git a/src/components/progress/progress.vue b/src/components/progress/progress.vue index 16a08b3..6cc472a 100644 --- a/src/components/progress/progress.vue +++ b/src/components/progress/progress.vue @@ -45,13 +45,18 @@ default: 10 } }, + data () { + return { + currentStatus: this.status + } + }, computed: { isStatus () { - return this.status == 'wrong' || this.status == 'success'; + return this.currentStatus == 'wrong' || this.currentStatus == 'success'; }, statusIcon () { let type = ''; - switch (this.status) { + switch (this.currentStatus) { case 'wrong': type = 'ios-close'; break; @@ -71,9 +76,9 @@ wrapClasses () { return [ `${prefixCls}`, - `${prefixCls}-${this.status}`, + `${prefixCls}-${this.currentStatus}`, { - [`${prefixCls}-show-info`]: !this.hideInfo, + [`${prefixCls}-show-info`]: !this.hideInfo } ]; @@ -94,16 +99,18 @@ return `${prefixCls}-bg`; } }, - compiled () { + created () { this.handleStatus(); }, methods: { handleStatus (isDown) { if (isDown) { - this.status = 'normal'; + this.currentStatus = 'normal'; + this.$emit('on-status-change', 'normal'); } else { if (parseInt(this.percent, 10) == 100) { - this.status = 'success'; + this.currentStatus = 'success'; + this.$emit('on-status-change', 'success'); } } } @@ -115,6 +122,9 @@ } else { this.handleStatus(); } + }, + status (val) { + this.currentStatus = val; } } }; diff --git a/src/components/upload/upload-list.vue b/src/components/upload/upload-list.vue index 9e3f48f..dce4ee8 100644 --- a/src/components/upload/upload-list.vue +++ b/src/components/upload/upload-list.vue @@ -11,13 +11,14 @@ type="ios-close-empty" :class="[prefixCls + '-list-remove']" v-show="file.status === 'finished'" - @click="handleRemove(file)"> - + @click.native="handleRemove(file)"> + + + @@ -41,7 +42,6 @@ prefixCls: prefixCls }; }, - computed: {}, methods: { fileCls (file) { return [ diff --git a/src/components/upload/upload.vue b/src/components/upload/upload.vue index 89d3b58..e51dcb4 100644 --- a/src/components/upload/upload.vue +++ b/src/components/upload/upload.vue @@ -7,9 +7,9 @@ @dragover.prevent="dragOver = true" @dragleave.prevent="dragOver = false"> @@ -154,7 +154,7 @@ }, methods: { handleClick () { - this.$els.input.click(); + this.$refs.input.click(); }, handleChange (e) { const files = e.target.files; @@ -163,7 +163,7 @@ return; } this.uploadFiles(files); - this.$els.input.value = null; + this.$refs.input.value = null; }, onDrop (e) { this.dragOver = false; @@ -276,7 +276,8 @@ _file.status = 'finished'; _file.response = res; - this.$dispatch('on-form-change', _file); + // todo 事件 +// this.$dispatch('on-form-change', _file); this.onSuccess(res, _file, this.fileList); setTimeout(() => { diff --git a/src/index.js b/src/index.js index 8b36d27..bd02f90 100644 --- a/src/index.js +++ b/src/index.js @@ -26,7 +26,7 @@ import InputNumber from './components/input-number'; // import Notice from './components/notice'; // import Page from './components/page'; // import Poptip from './components/poptip'; -// import Progress from './components/progress'; +import Progress from './components/progress'; import Radio from './components/radio'; // import Rate from './components/rate'; // import Slider from './components/slider'; @@ -41,7 +41,7 @@ import Timeline from './components/timeline'; // import Tooltip from './components/tooltip'; // import Transfer from './components/transfer'; // import Tree from './components/tree'; -// import Upload from './components/upload'; +import Upload from './components/upload'; import { Row, Col } from './components/grid'; // import { Select, Option, OptionGroup } from './components/select'; import locale from './locale'; @@ -88,7 +88,7 @@ const iview = { // Page, // Panel: Collapse.Panel, // Poptip, - // Progress, + Progress, Radio, RadioGroup: Radio.Group, // Rate, @@ -109,7 +109,7 @@ const iview = { // Tooltip, // Transfer, // Tree, - // Upload + Upload }; const install = function (Vue, opts = {}) { diff --git a/test/app.vue b/test/app.vue index 831fdd0..3168c85 100644 --- a/test/app.vue +++ b/test/app.vue @@ -26,6 +26,8 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
  • Badge
  • Tag
  • InputNumber
    • +
  • Progress
    • +
  • Upload
    • diff --git a/test/main.js b/test/main.js index 85c1382..00c3424 100644 --- a/test/main.js +++ b/test/main.js @@ -68,6 +68,14 @@ const router = new VueRouter({ { path: '/input-number', component: require('./routers/input-number.vue') + }, + { + path: '/upload', + component: require('./routers/upload.vue') + }, + { + path: '/progress', + component: require('./routers/progress.vue') } ] }); diff --git a/test/routers/progress.vue b/test/routers/progress.vue new file mode 100644 index 0000000..e69459e --- /dev/null +++ b/test/routers/progress.vue @@ -0,0 +1,37 @@ + + diff --git a/test/routers/upload.vue b/test/routers/upload.vue index 0ecfa95..9915773 100644 --- a/test/routers/upload.vue +++ b/test/routers/upload.vue @@ -1,37 +1,38 @@