support Progress & Upload

2017-03-02 14:41:28 +08:00 · 2017-03-02 14:41:28 +08:00 · 5d08ddf27c
commit 5d08ddf27c
parent c97c42ab2e
10 changed files with 137 additions and 63 deletions
--- a/CHANGE.md
+++ b/CHANGE.md
@ -13,4 +13,8 @@ value 改为了 label，使用 v-model，废弃 checked
 ### Badge
 class 改为了 className
 ### InputNumber
-使用 v-model
+使用 v-model
+### Progress (名称有警告)
+新增 on-status-change 事件
+### Upload 
+父级不能 computed Upload 的 fileList 了
--- 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
--- 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;
            }
        }
    };
--- 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)"></Icon>
-            <Progress
-                v-if="file.showProgress"
-                :stroke-width="2"
-                :percent="parsePercentage(file.percentage)"
-                :status="file.status === 'finished' && file.showProgress ? 'success' : 'normal'"
-                transition="fade"></Progress>
+                @click.native="handleRemove(file)"></Icon>
+            <transition name="fade">
+                <Progress
+                    v-if="file.showProgress"
+                    :stroke-width="2"
+                    :percent="parsePercentage(file.percentage)"
+                    :status="file.status === 'finished' && file.showProgress ? 'success' : 'normal'"></Progress>
+            </transition>
        </li>
    </ul>
 </template>
@ -41,7 +42,6 @@
                prefixCls: prefixCls
            };
        },
-        computed: {},
        methods: {
            fileCls (file) {
                return [
--- a/src/components/upload/upload.vue
+++ b/src/components/upload/upload.vue
@ -7,9 +7,9 @@
            @dragover.prevent="dragOver = true"
            @dragleave.prevent="dragOver = false">
            <input
-                v-el:input
-                :class="[prefixCls + '-input']"
+                ref="input"
                type="file"
+                :class="[prefixCls + '-input']"
                @change="handleChange"
                :multiple="multiple"
                :accept="accept">
@ -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(() => {
--- 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 = {}) {
--- 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; }
                <li><router-link to="/badge">Badge</router-link></li>
                <li><router-link to="/tag">Tag</router-link></li>
                <li><router-link to="/input-number">InputNumber</router-link></li>
+                <li><router-link to="/progress">Progress</router-link></li>
+                <li><router-link to="/upload">Upload</router-link></li>
            </ul>
        </nav>
        <router-view></router-view>
--- 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')
        }
    ]
 });
--- a/test/routers/progress.vue
+++ b/test/routers/progress.vue
@ -0,0 +1,37 @@
+<template>
+    <div>
+        <Progress :percent="percent"></Progress>
+        <Button-group size="large">
+            <Button icon="ios-plus-empty" @click.native="add"></Button>
+            <Button icon="ios-minus-empty" @click.native="minus"></Button>
+        </Button-group>
+        <Progress :percent="25" :stroke-width="5"></Progress>
+        <Progress :percent="100">
+            <Icon type="checkmark-circled"></Icon>
+            <span>成功</span>
+        </Progress>
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                percent: 0
+            }
+        },
+        methods: {
+            add () {
+                if (this.percent >= 100) {
+                    return false;
+                }
+                this.percent += 10;
+            },
+            minus () {
+                if (this.percent <= 0) {
+                    return false;
+                }
+                this.percent -= 10;
+            }
+        }
+    }
+</script>
--- a/test/routers/upload.vue
+++ b/test/routers/upload.vue
@ -1,37 +1,38 @@
 <template>
-    <div class="demo-upload-list" v-for="item in uploadList">
-        <template v-if="item.status === 'finished'">
-            <img :src="item.url">
-            <div class="demo-upload-list-cover">
-                <Icon type="ios-eye-outline" @click="handleView(item.name)"></Icon>
-                <Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon>
-            </div>
-        </template>
-        <template v-else>
-            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
-        </template>
-    </div>
-    <Upload
-            v-ref:upload
-            :show-upload-list="false"
-            :default-file-list="defaultList"
-            :on-success="handleSuccess"
-            :format="['jpg','jpeg','png']"
-            :max-size="2048"
-            :on-format-error="handleFormatError"
-            :on-exceeded-size="handleMaxSize"
-            :before-upload="handleBeforeUpload"
-            multiple
-            type="drag"
-            action="//jsonplaceholder.typicode.com/posts/"
-            style="display: inline-block;width:58px;">
-        <div style="width: 58px;height:58px;line-height: 58px;">
-            <Icon type="camera" size="20"></Icon>
+    <div>
+        <div class="demo-upload-list" v-for="item in uploadList">
+            <template v-if="item.status === 'finished'">
+                <img :src="item.url">
+                <div class="demo-upload-list-cover">
+                    <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
+                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
+                </div>
+            </template>
+            <template v-else>
+                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
+            </template>
        </div>
-    </Upload>
-    <Modal title="查看图片" :visible.sync="visible">
-        <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
-    </Modal>
+        <Upload
+                ref="upload"
+                :show-upload-list="false"
+                :default-file-list="defaultList"
+                :on-success="handleSuccess"
+                :format="['jpg','jpeg','png']"
+                :max-size="2048"
+                :on-format-error="handleFormatError"
+                :on-exceeded-size="handleMaxSize"
+                @on-progress="handleProgress"
+                :before-upload="handleBeforeUpload"
+                multiple
+                type="drag"
+                action="//jsonplaceholder.typicode.com/posts/"
+                style="display: inline-block;width:58px;">
+            <div style="width: 58px;height:58px;line-height: 58px;">
+                <Icon type="camera" size="20"></Icon>
+            </div>
+        </Upload>
+        {{ visible }}
+    </div>
 </template>
 <script>
    export default {
@ -48,13 +49,21 @@
                    }
                ],
                imgName: '',
-                visible: false
+                visible: false,
+                uploadList: []
            }
        },
        computed: {
-            uploadList () {
-                return this.$refs.upload ? this.$refs.upload.fileList : [];
-            }
+//            uploadList () {
+//                return this.$refs.upload ? this.$refs.upload.fileList : [];
+//            }
+        },
+        watch: {
+
+        },
+        mounted () {
+            this.uploadList = this.$refs.upload.fileList;
+//            console.log(this.$refs.upload.fileList)
        },
        methods: {
            handleView (name) {
@ -91,6 +100,9 @@
                    });
                }
                return check;
+            },
+            handleProgress (s) {
+                console.log(s)
            }
        }
    }