support Tree & add dispatch and broadcast methods

support Tree，many component add name $option；add dispatch and broadcast methods, mixins it

support Tree & add dispatch and broadcast methods
support Tree，many component add name $option；add dispatch and broadcast methods, mixins it
梁灏
1 parent bb71140e
Showing 28 changed files with 190 additions and 69 deletions Show diff stats
CHANGE.md
README.md
src/components/alert/alert.vue
src/components/badge/badge.vue
src/components/button/button-group.vue
src/components/cascader/cascader.vue
src/components/checkbox/checkbox-group.vue
src/components/circle/circle.vue
src/components/collapse/collapse.vue
src/components/collapse/panel.vue
src/components/grid/col.vue
src/components/grid/row.vue
src/components/input-number/input-number.vue
src/components/radio/radio-group.vue
src/components/steps/step.vue
src/components/steps/steps.vue
src/components/switch/switch.vue
src/components/tag/tag.vue
src/components/timeline/timeline-item.vue
src/components/timeline/timeline.vue
@@ -21,4 +21,6 @@ class 改为了 className
 ### Collapse
 废弃 activeKey，使用 v-model，key 是保留的，更名为 name
 ### Carousel
-废弃 activeIndex，使用 v-model，v-for="n in slides.length",Vue2的数字循环，是从1开始的
 \ No newline at end of file
+废弃 activeIndex，使用 v-model，v-for="n in slides.length",Vue2的数字循环，是从1开始的
+### Tree
+废弃 data，改为 value，使用 v-model，key 更名为 name
 \ No newline at end of file
@@ -48,7 +48,7 @@
 - [ ] Tooltip
 - [ ] Poptip
 - [x] Carousel
-- [ ] Tree
+- [x] Tree
 - [ ] Menu
 - [ ] Tabs
 - [ ] Dropdown
@@ -23,6 +23,7 @@
     const prefixCls = 'ivu-alert';
  
     export default {
+        name: 'Alert',
         components: { Icon },
         props: {
             type: {
@@ -12,6 +12,7 @@
     const prefixCls = 'ivu-badge';
  
     export default {
+        name: 'Badge',
         props: {
             count: [Number, String],
             dot: {
@@ -9,7 +9,7 @@
     const prefixCls = 'ivu-btn-group';
  
     export default {
-        name: 'buttonGroup',
+        name: 'ButtonGroup',
         props: {
             size: {
                 validator (value) {
@@ -36,6 +36,7 @@
     const prefixCls = 'ivu-cascader';
  
     export default {
+        name: 'Cascader',
         components: { iInput, Dropdown, Icon, Caspanel },
         directives: { clickoutside },
         props: {
@@ -7,7 +7,7 @@
     const prefixCls = 'ivu-checkbox-group';
  
     export default {
-        name: 'checkboxGroup',
+        name: 'CheckboxGroup',
         props: {
             value: {
                 type: Array,
@@ -15,6 +15,7 @@
     const prefixCls = 'ivu-chart-circle';
  
     export default {
+        name: 'Circle',
         props: {
             percent: {
                 type: Number,
@@ -7,6 +7,7 @@
     const prefixCls = 'ivu-collapse';
  
     export default {
+        name: 'Collapse',
         props: {
             accordion: {
                 type: Boolean,
@@ -14,6 +14,7 @@
     const prefixCls = 'ivu-collapse';
  
     export default {
+        name: 'Panel',
         components: { Icon },
         props: {
             name: {
@@ -7,6 +7,7 @@
     const prefixCls = 'ivu-col';
  
     export default {
+        name: 'iCol',
         props: {
             span: [Number, String],
             order: [Number, String],
@@ -9,6 +9,7 @@
     const prefixCls = 'ivu-row';
  
     export default {
+        name: 'Row',
         props: {
             type: {
                 validator (value) {
@@ -61,6 +61,7 @@
     }
  
     export default {
+        name: 'InputNumber',
         props: {
             max: {
                 type: Number,
@@ -9,7 +9,7 @@
     const prefixCls = 'ivu-radio-group';
  
     export default {
-        name: 'radioGroup',
+        name: 'RadioGroup',
         props: {
             value: {
                 type: [String, Number],
@@ -20,6 +20,7 @@
     const iconPrefixCls = 'ivu-icon';
  
     export default {
+        name: 'Step',
         props: {
             status: {
                 validator (value) {
@@ -9,6 +9,7 @@
     const prefixCls = 'ivu-steps';
  
     export default {
+        name: 'Steps',
         props: {
             current: {
                 type: Number,
@@ -12,6 +12,7 @@
     const prefixCls = 'ivu-switch';
  
     export default {
+        name: 'Switch',
         props: {
             value: {
                 type: Boolean,
@@ -12,6 +12,7 @@
     const prefixCls = 'ivu-tag';
  
     export default {
+        name: 'Tag',
         components: { Icon },
         props: {
             closable: {
@@ -11,6 +11,7 @@
     const prefixCls = 'ivu-timeline';
  
     export default {
+        name: 'TimelineItem',
         props: {
             color: {
                 type: String,
@@ -7,6 +7,7 @@
     const prefixCls = 'ivu-timeline';
  
     export default {
+        name: 'Timeline',
         props: {
             pending: {
                 type: Boolean,
 <template>
     <ul :class="classes">
-        <li v-for="item in data" :class="itemCls(item)">
-            <span :class="arrowCls(item)" @click="setExpand(item.disabled, $index)">
+        <li v-for="(item, index) in data" :class="itemCls(item)">
+            <span :class="arrowCls(item)" @click="setExpand(item.disabled, index)">
                 <Icon type="arrow-right-b"></Icon>
             </span>
             <Checkbox
                 v-if="showCheckbox"
-                :checked="item.checked && item.childrenCheckedStatus == 2"
+                :value="item.checked && item.childrenCheckedStatus == 2"
                 :disabled="item.disabled || item.disableCheckbox"
                 :indeterminate="item.checked && item.childrenCheckedStatus == 1"
-                @click.prevent="setCheck(item.disabled||item.disableCheckbox,$index)"></Checkbox>
-            <a :class="titleCls(item)" @click="setSelect(item.disabled, $index)">
+                @click.prevent="setCheck(item.disabled||item.disableCheckbox, index)"></Checkbox>
+            <a :class="titleCls(item)" @click="setSelect(item.disabled, index)">
                 <span :class="[prefixCls + '-title']" v-html="item.title"></span>
             </a>
-            <tree
-                v-if="!item.isLeaf"
-                v-show="item.expand"
-                :class="expandCls(item)"
-                :data.sync="item.children"
-                :key="this.key+'.'+$index"
-                :multiple="multiple"
-                :show-checkbox="showCheckbox"
-                transition="slide-up"></tree>
+            <transition name="slide-up">
+                <Tree
+                    v-if="!item.isLeaf"
+                    v-show="item.expand"
+                    :class="expandCls(item)"
+                    :value="item.children"
+                    :name="item.name+'.'+index"
+                    :multiple="multiple"
+                    :show-checkbox="showCheckbox"></Tree>
+            </transition>
         </li>
     </ul>
 </template>
@@ -29,20 +30,22 @@
     import Icon from '../icon/icon.vue';
     import Checkbox from '../checkbox/checkbox.vue';
     import { t } from '../../locale';
+    import emitter from '../../mixins/emitter';
  
     const prefixCls = 'ivu-tree';
  
     export default {
-        name: 'tree',
+        name: 'Tree',
         components: { Icon, Checkbox },
+        mixins: [ emitter ],
         props: {
-            data: {
+            value: {
                 type: Array,
                 default () {
                     return [];
                 }
             },
-            key: {
+            name: {
                 type: String,
                 default: '0'
             },
@@ -63,12 +66,13 @@
         },
         data () {
             return {
-                prefixCls: prefixCls
+                prefixCls: prefixCls,
+                data: this.value
             };
         },
         computed: {
             classes () {
-                if (this.key === '0') {
+                if (this.name === '0') {
                     return this.prefixCls;
                 } else {
                     return `${this.prefixCls}-child-tree`;
@@ -76,8 +80,11 @@
             }
         },
         watch: {
-            data(){
-                if (this.key === '0') {
+            value (val) {
+                this.data = val;
+            },
+            data () {
+                if (this.name === '0') {
                     this.setKey();
                     this.preHandle();
                 }
@@ -118,55 +125,82 @@
             },
             setKey () {
                 for (let i = 0; i < this.data.length; i++) {
-                    this.data[i].key = `${this.key}.${i}`;
+                    this.data[i].name = `${this.name}.${i}`;
                 }
             },
             preHandle () {
-                for (let [i,item] of this.data.entries()) {
+                for (let [i, item] of this.data.entries()) {
                     if (!item.children || !item.children.length) {
-                        this.$set(`data[${i}].isLeaf`, true);
-                        this.$set(`data[${i}].childrenCheckedStatus`, 2);
+//                        this.$set(`data[${i}].isLeaf`, true);
+//                        this.$set(`data[${i}].childrenCheckedStatus`, 2);
+                        this.$set(this.data[i], 'isLeaf', true);
+                        this.$set(this.data[i], 'childrenCheckedStatus', 2);
                         continue;
                     }
                     if (item.checked && !item.childrenCheckedStatus) {
-                        this.$set(`data[${i}].childrenCheckedStatus`, 2);
-                        this.$broadcast('parentChecked', true, `${this.key}.${i}`);
+//                        this.$set(`data[${i}].childrenCheckedStatus`, 2);
+                        this.$set(this.data[i], 'childrenCheckedStatus', 2);
+//                        this.$broadcast('parentChecked', true, `${this.name}.${i}`);
+                        this.broadcast('Tree', 'parentChecked', {
+                            status: true,
+                            name: `${this.name}.${i}`
+                        });
                     } else {
                         let status = this.getChildrenCheckedStatus(item.children);
-                        this.$set(`data[${i}].childrenCheckedStatus`, status);
-                        if (status !== 0) this.$set(`data[${i}].checked`, true);
+//                        this.$set(`data[${i}].childrenCheckedStatus`, status);
+                        this.$set(this.data[i], 'childrenCheckedStatus', status);
+//                        if (status !== 0) this.$set(`data[${i}].checked`, true);
+                        if (status !== 0) this.$set(this.data[i], 'checked', true);
                     }
                 }
             },
             setExpand (disabled, index) {
                 if (!disabled) {
-                    this.$set(`data[${index}].expand`, !this.data[index].expand);
+//                    this.$set(`data[${index}].expand`, !this.data[index].expand);
+                    this.$set(this.data[index], 'expand', !this.data[index].expand);
                 }
             },
             setSelect (disabled, index) {
                 if (!disabled) {
                     const selected = !this.data[index].selected;
                     if (this.multiple || !selected) {
-                        this.$set(`data[${index}].selected`, selected);
+//                        this.$set(`data[${index}].selected`, selected);
+                        this.$set(this.data[index], 'selected', selected);
                     } else {
                         for (let i = 0; i < this.data.length; i++) {
                             if (i == index) {
-                                this.$set(`data[${i}].selected`, true);
+//                                this.$set(`data[${i}].selected`, true);
+                                this.$set(this.data[i], 'selected', true);
                             } else {
-                                this.$set(`data[${i}].selected`, false);
+//                                this.$set(`data[${i}].selected`, false);
+                                this.$set(this.data[i], 'selected', false);
                             }
                         }
                     }
-                    this.$dispatch('nodeSelected', this, selected);
+//                    this.$dispatch('nodeSelected', this, selected);
+                    this.dispatch('Tree', 'nodeSelected', {
+                        ori: this,
+                        selected: selected
+                    })
                 }
             },
             setCheck (disabled, index) {
                 if (disabled) return;
                 const checked = !this.data[index].checked;
-                this.$set(`data[${index}].checked`, checked);
-                this.$set(`data[${index}].childrenCheckedStatus`, checked ? 2 : 0);
-                this.$dispatch('childChecked', this, this.key);
-                this.$broadcast('parentChecked', checked, `${this.key}.${index}`);
+//                this.$set(`data[${index}].checked`, checked);
+                this.$set(this.data[index], 'checked', checked);
+//                this.$set(`data[${index}].childrenCheckedStatus`, checked ? 2 : 0);
+                this.$set(this.data[index], 'childrenCheckedStatus', checked ? 2 : 0);
+//                this.$dispatch('childChecked', this, this.name);
+                this.dispatch('Tree', 'childChecked', {
+                    ori: this,
+                    name: this.name
+                });
+//                this.$broadcast('parentChecked', checked, `${this.name}.${index}`);
+                this.broadcast('Tree', 'parentChecked', {
+                    status: checked,
+                    name: `${this.name}.${index}`
+                });
             },
             getNodes (data, opt) {
                 data = data || this.data;
@@ -215,55 +249,83 @@
                 }
             }
         },
-        ready(){
+        mounted () {
             this.setKey();
             this.preHandle();
  
-            this.$on('nodeSelected', (ori, selected) => {
-                if (this.key !== '0') return true;
+//            this.$on('nodeSelected', (ori, selected) => {
+            this.$on('nodeSelected', (params) => {
+                const ori = params.ori;
+                const selected = params.selected;
+
+                if (this.name !== '0') return true;
                 if (!this.multiple && selected) {
                     if (this !== ori) {
                         for (let i = 0; i < this.data.length; i++) {
-                            this.$set(`data[${i}].selected`, false);
+//                            this.$set(`data[${i}].selected`, false);
+                            this.$set(this.data[i], 'selected', false);
                         }
                     }
-                    this.$broadcast('cancelSelected', ori);
+//                    this.$broadcast('cancelSelected', ori);
+                    this.broadcast('Tree', 'cancelSelected', ori);
                 }
                 this.$nextTick(() => {
                     this.$emit('on-select-change', this.getSelectedNodes());
                 });
             });
             this.$on('cancelSelected', ori => {
-                this.$broadcast('cancelSelected', ori);
+//                this.$broadcast('cancelSelected', ori);
+                this.broadcast('Tree', 'cancelSelected', ori);
                 if (this !== ori) {
                     for (let i = 0; i < this.data.length; i++) {
-                        this.$set(`data[${i}].selected`, false);
+//                        this.$set(`data[${i}].selected`, false);
+                        this.$set(this.data[i], 'selected', false);
                     }
                 }
             });
-            this.$on('parentChecked', (status, key) => {
-                if (this.key == key || this.key.startsWith(key + '.')) {
+//            this.$on('parentChecked', (status, name) => {
+            this.$on('parentChecked', (params) => {
+                const status = params.status;
+                const name = params.name;
+
+                if (this.name == name || this.name.startsWith(name + '.')) {
                     for (let i = 0; i < this.data.length; i++) {
-                        this.$set(`data[${i}].checked`, status);
-                        this.$set(`data[${i}].childrenCheckedStatus`, status ? 2 : 0);
+//                        this.$set(`data[${i}].checked`, status);
+                        this.$set(this.data[i], 'checked', status);
+//                        this.$set(`data[${i}].childrenCheckedStatus`, status ? 2 : 0);
+                        this.$set(this.data[i], 'childrenCheckedStatus', status ? 2 : 0);
                     }
-                    this.$broadcast('parentChecked', status, key);
+//                    this.$broadcast('parentChecked', status, name);
+                    this.broadcast('Tree', 'parentChecked', {
+                        status: status,
+                        name: name
+                    });
                 }
             });
-            this.$on('childChecked', (ori, key) => {
-                if (this.key === '0') {
+//            this.$on('childChecked', (ori, name) => {
+            this.$on('childChecked', (params) => {
+                const ori = params.ori;
+                const name = params.name;
+
+                if (this.name === '0') {
                     this.$nextTick(() => {
                         this.$emit('on-check-change', this.getCheckedNodes());
                     });
                 }
                 if (this === ori) return;
                 for (let [i,item] of this.data.entries()) {
-                    if (this.key + '.' + i == key) {
+                    if (this.name + '.' + i == name) {
                         let temp = this.getChildrenCheckedStatus(item.children);
                         if (temp != item.childrenCheckedStatus) {
-                            this.$set(`data[${i}].checked`, !!temp);
-                            this.$set(`data[${i}].childrenCheckedStatus`, temp);
-                            if (this.key !== '0') this.$dispatch('childChecked', this, this.key);
+//                            this.$set(`data[${i}].checked`, !!temp);
+                            this.$set(this.data[i], 'checked', !!temp);
+//                            this.$set(`data[${i}].childrenCheckedStatus`, temp);
+                            this.$set(this.data[i], 'childrenCheckedStatus', temp);
+//                            if (this.name !== '0') this.$dispatch('childChecked', this, this.name);
+                            if (this.name !== '0') this.dispatch('Tree', 'childChecked', {
+                                ori: this,
+                                name: this.name
+                            });
                         }
                     }
                 }
@@ -28,6 +28,7 @@
     const prefixCls = 'ivu-upload';
  
     export default {
+        name: 'UploadList',
         components: { Icon, Progress },
         props: {
             files: {
@@ -31,6 +31,7 @@
     const prefixCls = 'ivu-upload';
  
     export default {
+        name: 'Upload',
         components: { UploadList },
         props: {
             action: {
@@ -40,7 +40,7 @@ import Timeline from &#39;./components/timeline&#39;;
 // import TimePicker from './components/time-picker';
 // import Tooltip from './components/tooltip';
 // import Transfer from './components/transfer';
-// import Tree from './components/tree';
+import Tree from './components/tree';
 import Upload from './components/upload';
 import { Row, Col } from './components/grid';
 // import { Select, Option, OptionGroup } from './components/select';
@@ -108,7 +108,7 @@ const iview = {
     // TimePicker,
     // Tooltip,
     // Transfer,
-    // Tree,
+    Tree,
     Upload
 };
  
+function broadcast(componentName, eventName, params) {
+    this.$children.forEach(child => {
+        const name = child.$options.name;
+
+        if (name === componentName) {
+            child.$emit.apply(child, [eventName].concat(params));
+        } else {
+            broadcast.apply(child, [componentName, eventName].concat([params]));
+        }
+    });
+}
+export default {
+    methods: {
+        dispatch(componentName, eventName, params) {
+            let parent = this.$parent || this.$root;
+            let name = parent.$options.name;
+
+            while (parent && (!name || name !== componentName)) {
+                parent = parent.$parent;
+
+                if (parent) {
+                    name = parent.$options.name;
+                }
+            }
+            if (parent) {
+                parent.$emit.apply(parent, [eventName].concat(params));
+            }
+        },
+        broadcast(componentName, eventName, params) {
+            broadcast.call(this, componentName, eventName, params);
+        }
+    }
+};
 \ No newline at end of file
@@ -30,6 +30,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/upload">Upload</router-link></li>
                 <li><router-link to="/collapse">Collapse</router-link></li>
                 <li><router-link to="/carousel">Carousel</router-link></li>
+                <li><router-link to="/tree">Tree</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
@@ -84,6 +84,10 @@ const router = new VueRouter({
         {
             path: '/carousel',
             component: require('./routers/carousel.vue')
+        },
+        {
+            path: '/tree',
+            component: require('./routers/tree.vue')
         }
     ]
 });
 <template>
-    <Tree
-        :data.sync="treeData"
-        :show-checkbox="true"
-        :multiple="true"
-        @on-select-change="selectFn"
-        @on-check-change="checkFn"></Tree>
+    <div>
+        <Tree
+            v-model="treeData"
+            :show-checkbox="true"
+            :multiple="true"
+            @on-select-change="selectFn"
+            @on-check-change="checkFn"></Tree>
+    </div>
 </template>
 <script>
     export default {