From 99d0429e276f6371d22bcc8279c4fb4a9708218b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Wed, 15 Mar 2017 15:27:04 +0800
Subject: [PATCH] update Button & Table Cell
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Button add custom event @click，you can use @click in i-button now;
Table Cell support data from content
---
 examples/routers/table.vue       | 199 ++++++---------------
 examples/routers/upload.vue      | 288 +++++++++++++++++--------------
 src/components/button/button.vue |   9 +-
 src/components/table/cell.vue    |  24 ++-
 4 files changed, 231 insertions(+), 289 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 3eac9b52..0926ece9 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,169 +1,82 @@
-<!--<template>-->
-    <!--<Card>-->
-        <!--<Table border :content="self" :columns="columns7" :data="data6"></Table>-->
-    <!--</Card>-->
-<!--</template>-->
-<!--<script>-->
-    <!--export default {-->
-        <!--data () {-->
-            <!--return {-->
-                <!--self: this,-->
-                <!--columns7: [-->
-                    <!--{-->
-                        <!--title: '姓名',-->
-                        <!--key: 'name',-->
-                        <!--render (row, column, index) {-->
-                            <!--return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;-->
-                        <!--}-->
-                    <!--},-->
-                    <!--{-->
-                        <!--title: '年龄',-->
-                        <!--key: 'age'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--title: '地址',-->
-                        <!--key: 'address'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--title: '操作',-->
-                        <!--key: 'action',-->
-                        <!--width: 150,-->
-                        <!--align: 'center',-->
-                        <!--render (row, column, index) {-->
-                            <!--return `<i-button type="primary" size="small" @click.native="show(${index})">查看</i-button> <i-button type="error" size="small" @click.native="remove(${index})">删除</i-button>`;-->
-                        <!--}-->
-                    <!--}-->
-                <!--],-->
-                <!--data6: [-->
-                    <!--{-->
-                        <!--name: '王小明',-->
-                        <!--age: 18,-->
-                        <!--address: '北京市朝阳区芍药居'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--name: '张小刚',-->
-                        <!--age: 25,-->
-                        <!--address: '北京市海淀区西二旗'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--name: '李小红',-->
-                        <!--age: 30,-->
-                        <!--address: '上海市浦东新区世纪大道'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--name: '周小伟',-->
-                        <!--age: 26,-->
-                        <!--address: '深圳市南山区深南大道'-->
-                    <!--}-->
-                <!--]-->
-            <!--}-->
-        <!--},-->
-        <!--methods: {-->
-            <!--show (index) {-->
-                <!--console.log(`姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`)-->
-            <!--},-->
-            <!--remove (index) {-->
-                <!--this.data6.splice(index, 1);-->
-            <!--}-->
-        <!--},-->
-        <!--mounted () {-->
-            <!--setTimeout(() => {-->
-<!--//                this.data6.splice(2, 1);-->
-            <!--}, 3000)-->
-        <!--}-->
-    <!--}-->
-<!--</script>-->
-
-
 <template>
-    <div>
-        <i-table border :columns="columns6" :data="data5"></i-table>
-    </div>
+    <i-table border :content="self" :columns="columns7" :data="data6"></i-table>
 </template>
 <script>
     export default {
         data () {
             return {
-                columns6: [
-                    {
-                        title: '日期',
-                        key: 'date'
-                    },
+                info: '123',
+                self: this,
+                columns7: [
                     {
                         title: '姓名',
-                        key: 'name'
+                        key: 'name',
+//                        render (row, column, index) {
+//                            return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;
+//                        }
                     },
                     {
                         title: '年龄',
-                        key: 'age',
-                        filters: [
-                            {
-                                label: '大于25岁',
-                                value: 1
-                            },
-                            {
-                                label: '小于25岁',
-                                value: 2
-                            }
-                        ],
-                        filterMultiple: false,
-                        filterMethod (value, row) {
-                            if (value === 1) {
-                                return row.age > 25;
-                            } else if (value === 2) {
-                                return row.age < 25;
-                            }
-                        }
+                        key: 'age'
                     },
                     {
                         title: '地址',
-                        key: 'address',
-                        filters: [
-                            {
-                                label: '北京',
-                                value: '北京'
-                            },
-                            {
-                                label: '上海',
-                                value: '上海'
-                            },
-                            {
-                                label: '深圳',
-                                value: '深圳'
-                            }
-                        ],
-                        filterMethod (value, row) {
-                            return row.address.indexOf(value) > -1;
+                        key: 'address'
+                    },
+                    {
+                        title: '操作',
+                        key: 'action',
+                        width: 150,
+                        align: 'center',
+                        render (row, column, index) {
+                            return `<i-button type="primary" size="small" @click="show(${index})">{{ info }}查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
                         }
                     }
                 ],
-                data5: [
+                data6: [
                     {
                         name: '王小明',
                         age: 18,
-                        address: '北京市朝阳区芍药居',
-                        date: '2016-10-03'
+                        address: '北京市朝阳区芍药居'
                     },
-                    {
-                        name: '张小刚',
-                        age: 25,
-                        address: '北京市海淀区西二旗',
-                        date: '2016-10-01'
-                    },
-                    {
-                        name: '李小红',
-                        age: 30,
-                        address: '上海市浦东新区世纪大道',
-                        date: '2016-10-02'
-                    },
-                    {
-                        name: '周小伟',
-                        age: 26,
-                        address: '深圳市南山区深南大道',
-                        date: '2016-10-04'
-                    }
+//                    {
+//                        name: '张小刚',
+//                        age: 25,
+//                        address: '北京市海淀区西二旗'
+//                    },
+//                    {
+//                        name: '李小红',
+//                        age: 30,
+//                        address: '上海市浦东新区世纪大道'
+//                    },
+//                    {
+//                        name: '周小伟',
+//                        age: 26,
+//                        address: '深圳市南山区深南大道'
+//                    }
                 ]
             }
+        },
+        computed: {
+            dddfff () {
+                return this.info
+            }
+        },
+        methods: {
+            show (index) {
+                this.$Modal.info({
+                    title: '用户信息',
+                    content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
+                })
+            },
+            remove (index) {
+                this.data6.splice(index, 1);
+            }
+        },
+        mounted () {
+            setTimeout(() => {
+                this.info = '444';
+            }, 3000);
         }
     }
 </script>
diff --git a/examples/routers/upload.vue b/examples/routers/upload.vue
index 62c97c15..faa897d7 100644
--- a/examples/routers/upload.vue
+++ b/examples/routers/upload.vue
@@ -1,147 +1,175 @@
+<!--<template>-->
+    <!--<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>-->
+                <!--<i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>-->
+            <!--</template>-->
+        <!--</div>-->
+        <!--<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 {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--defaultList: [-->
+                    <!--{-->
+                        <!--'name': 'a42bdcc1178e62b4694c830f028db5c0',-->
+                        <!--'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--'name': 'bc7521e033abdd1e92222d733590f104',-->
+                        <!--'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'-->
+                    <!--}-->
+                <!--],-->
+                <!--imgName: '',-->
+                <!--visible: false,-->
+                <!--uploadList: []-->
+            <!--}-->
+        <!--},-->
+        <!--computed: {-->
+<!--//            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) {-->
+                <!--this.imgName = name;-->
+                <!--this.visible = true;-->
+            <!--},-->
+            <!--handleRemove (file) {-->
+                <!--// 从 upload 实例删除数据-->
+                <!--const fileList = this.$refs.upload.fileList;-->
+                <!--this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);-->
+            <!--},-->
+            <!--handleSuccess (res, file) {-->
+                <!--// 因为上传过程为实例，这里模拟添加 url-->
+                <!--file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';-->
+                <!--file.name = '7eb99afb9d5f317c912f08b5212fd69a';-->
+            <!--},-->
+            <!--handleFormatError (file) {-->
+                <!--this.$Notice.warning({-->
+                    <!--title: '文件格式不正确',-->
+                    <!--desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'-->
+                <!--});-->
+            <!--},-->
+            <!--handleMaxSize (file) {-->
+                <!--this.$Notice.warning({-->
+                    <!--title: '超出文件大小限制',-->
+                    <!--desc: '文件 ' + file.name + ' 太大，不能超过 2M。'-->
+                <!--});-->
+            <!--},-->
+            <!--handleBeforeUpload () {-->
+                <!--const check = this.uploadList.length < 5;-->
+                <!--if (!check) {-->
+                    <!--this.$Notice.warning({-->
+                        <!--title: '最多只能上传 5 张图片。'-->
+                    <!--});-->
+                <!--}-->
+                <!--return check;-->
+            <!--},-->
+            <!--handleProgress (s) {-->
+                <!--console.log(s)-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->
+<!--<style>-->
+    <!--.demo-upload-list{-->
+        <!--display: inline-block;-->
+        <!--width: 60px;-->
+        <!--height: 60px;-->
+        <!--text-align: center;-->
+        <!--line-height: 60px;-->
+        <!--border: 1px solid transparent;-->
+        <!--border-radius: 4px;-->
+        <!--overflow: hidden;-->
+        <!--background: #fff;-->
+        <!--position: relative;-->
+        <!--box-shadow: 0 1px 1px rgba(0,0,0,.2);-->
+        <!--margin-right: 4px;-->
+    <!--}-->
+    <!--.demo-upload-list img{-->
+        <!--width: 100%;-->
+        <!--height: 100%;-->
+    <!--}-->
+    <!--.demo-upload-list-cover{-->
+        <!--display: none;-->
+        <!--position: absolute;-->
+        <!--top: 0;-->
+        <!--bottom: 0;-->
+        <!--left: 0;-->
+        <!--right: 0;-->
+        <!--background: rgba(0,0,0,.6);-->
+    <!--}-->
+    <!--.demo-upload-list:hover .demo-upload-list-cover{-->
+        <!--display: block;-->
+    <!--}-->
+    <!--.demo-upload-list-cover i{-->
+        <!--color: #fff;-->
+        <!--font-size: 20px;-->
+        <!--cursor: pointer;-->
+        <!--margin: 0 2px;-->
+    <!--}-->
+<!--</style>-->
+
+
 <template>
     <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>
-                <i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>
-            </template>
-        </div>
-        <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 action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload" ref="file">
+            <i-button type="ghost" icon="ios-cloud-upload-outline">选择文件</i-button>
         </Upload>
-        {{ visible }}
+        <i-button @click.native="handleUpload">上传</i-button>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                defaultList: [
-                    {
-                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
-                        'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
-                    },
-                    {
-                        'name': 'bc7521e033abdd1e92222d733590f104',
-                        'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
-                    }
-                ],
-                imgName: '',
-                visible: false,
-                uploadList: []
+                file: null
             }
         },
-        computed: {
-//            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) {
-                this.imgName = name;
-                this.visible = true;
+            handleBeforeUpload (file) {
+                this.file = file;
+                return false;
             },
-            handleRemove (file) {
-                // 从 upload 实例删除数据
-                const fileList = this.$refs.upload.fileList;
-                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
-            },
-            handleSuccess (res, file) {
-                // 因为上传过程为实例，这里模拟添加 url
-                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
-                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
-            },
-            handleFormatError (file) {
-                this.$Notice.warning({
-                    title: '文件格式不正确',
-                    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
-                });
-            },
-            handleMaxSize (file) {
-                this.$Notice.warning({
-                    title: '超出文件大小限制',
-                    desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
-                });
-            },
-            handleBeforeUpload () {
-                const check = this.uploadList.length < 5;
-                if (!check) {
-                    this.$Notice.warning({
-                        title: '最多只能上传 5 张图片。'
-                    });
-                }
-                return check;
-            },
-            handleProgress (s) {
-                console.log(s)
+            handleUpload () {
+                this.$refs.file.post(this.file);
             }
         }
     }
 </script>
-<style>
-    .demo-upload-list{
-        display: inline-block;
-        width: 60px;
-        height: 60px;
-        text-align: center;
-        line-height: 60px;
-        border: 1px solid transparent;
-        border-radius: 4px;
-        overflow: hidden;
-        background: #fff;
-        position: relative;
-        box-shadow: 0 1px 1px rgba(0,0,0,.2);
-        margin-right: 4px;
-    }
-    .demo-upload-list img{
-        width: 100%;
-        height: 100%;
-    }
-    .demo-upload-list-cover{
-        display: none;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background: rgba(0,0,0,.6);
-    }
-    .demo-upload-list:hover .demo-upload-list-cover{
-        display: block;
-    }
-    .demo-upload-list-cover i{
-        color: #fff;
-        font-size: 20px;
-        cursor: pointer;
-        margin: 0 2px;
-    }
-</style>
diff --git a/src/components/button/button.vue b/src/components/button/button.vue
index e3c4623d..6f8d4434 100644
--- a/src/components/button/button.vue
+++ b/src/components/button/button.vue
@@ -1,5 +1,5 @@
 <template>
-    <button :type="htmlType" :class="classes" :disabled="disabled">
+    <button :type="htmlType" :class="classes" :disabled="disabled" @click="handleClick">
         <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
         <Icon :type="icon" v-if="icon && !loading"></Icon>
         <span v-if="showSlot" ref="slot"><slot></slot></span>
@@ -64,8 +64,13 @@
                 ];
             }
         },
+        methods: {
+            handleClick (event) {
+                this.$emit('click', event);
+            }
+        },
         mounted () {
-            this.showSlot = this.$refs.slot.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
+            this.showSlot = this.$slots.default !== undefined;
         }
     };
 </script>
diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index b488eaea..b9902385 100644
--- a/src/components/table/cell.vue
+++ b/src/components/table/cell.vue
@@ -52,36 +52,32 @@
                     const template = this.column.render(this.row, this.column, this.index);
                     const cell = document.createElement('div');
                     cell.innerHTML = template;
-//                    const _oldParentChildLen = $parent.$children.length;
-//                    const _newParentChildLen = $parent.$children.length;
-//                    if (_oldParentChildLen !== _newParentChildLen) {    // if render normal html node, do not tag
-//                        this.uid = $parent.$children[$parent.$children.length - 1]._uid;    // tag it, and delete when data or columns update
-//                    }
+
                     this.$el.innerHTML = '';
                     let methods = {};
                     Object.keys($parent).forEach(key => {
-                        const func = $parent[`${key}`];
+                        const func = $parent[key];
                         if (typeof(func) === 'function' && func.name  === 'boundFn') {
-                            methods[`${key}`] = func;
+                            methods[key] = func;
                         }
                     });
                     const res = Vue.compile(cell.outerHTML);
+                    // todo 临时解决方案
                     const component = new Vue({
                         render: res.render,
                         staticRenderFns: res.staticRenderFns,
-                        methods: methods
+                        methods: methods,
+                        data () {
+                            return $parent._data;
+                        }
                     });
+
                     const Cell = component.$mount();
                     this.$refs.cell.appendChild(Cell.$el);
                 }
             },
             destroy () {
-                const $parent = this.content;
-                for (let i = 0; i < $parent.$children.length; i++) {
-                    if ($parent.$children[i]._uid === this.uid) {
-                        $parent.$children[i].$destroy();
-                    }
-                }
+
             },
             toggleSelect () {
                 this.$parent.$parent.toggleSelect(this.index);