update Cascader

update Cascader

src/components/cascader/cascader.vue

@@ -12,11 +12,12 @@
         <Dropdown v-show="visible" transition="slide-up">
             <div>
                 <Caspanel
+                    v-ref:caspanel
                     :prefix-cls="prefixCls"
                     :data.sync="data"
                     :disabled="disabled"
-                    :trigger="trigger"
-                    @on-update-result="updateResult"></Caspanel>
+                    :change-on-select="changeOnSelect"
+                    :trigger="trigger"></Caspanel>
             </div>
         </Dropdown>
     </div>
@@ -74,7 +75,7 @@
             renderFormat: {
                 type: Function,
                 default (label, selectedData) {
-                    return label.join('/');
+                    return label.join(' / ');
                 }
             }
         },
@@ -118,12 +119,46 @@
                 this.visible = true;
             },
             updateResult (result) {
-                console.log(JSON.stringify(result))
-                this.selected = result;
+                this.tmpSelected = result;
+            },
+            updateSelected () {
+                this.$broadcast('on-find-selected', this.value);
             }
         },
         ready () {
+            this.updateSelected();
+        },
+        events: {
+            // lastValue: is click the final val
+            // fromInit: is this emit from update value
+            'on-result-change' (lastValue, changeOnSelect, fromInit) {
+                if (lastValue || changeOnSelect) {
+                    const oldVal = JSON.stringify(this.value);
+                    this.selected = this.tmpSelected;
 
+                    let newVal = [];
+                    this.selected.forEach((item) => {
+                        newVal.push(item.value);
+                    });
+                    this.value = newVal;
+
+                    if (JSON.stringify(this.value) !== oldVal) {
+                        this.$emit('on-change', this.value);
+                    }
+                }
+                if (lastValue && !fromInit) {
+                    this.handleClose();
+                }
+            }
+        },
+        watch: {
+            visible (val) {
+                if (val) {
+                    if (this.value.length) {
+                        this.updateSelected();
+                    }
+                }
+            }
         }
     }
 </script>

src/components/cascader/casitem.vue

@@ -13,7 +13,8 @@
                 return [
                     `${this.prefixCls}-menu-item`,
                     {
-                        [`${this.prefixCls}-menu-item-active`]: this.tmpItem.value === this.data.value
+                        [`${this.prefixCls}-menu-item-active`]: this.tmpItem.value === this.data.value,
+                        [`${this.prefixCls}-menu-item-disabled`]: this.data.disabled
                     }
                 ]
             }

src/components/cascader/caspanel.vue

@@ -7,7 +7,7 @@
             :tmp-item="tmpItem"
             @click.stop="handleClickItem(item)"
             @mouseenter.stop="handleHoverItem(item)"></Casitem>
-    </ul><Caspanel v-if="sublist && sublist.length" :prefix-cls="prefixCls" :data.sync="sublist" :disabled="disabled" :trigger="trigger" @on-update-result="updateResult"></Caspanel>
+    </ul><Caspanel v-if="sublist && sublist.length" :prefix-cls="prefixCls" :data.sync="sublist" :disabled="disabled" :trigger="trigger" :change-on-select="changeOnSelect"></Caspanel>
 </template>
 <script>
     import Casitem from './casitem.vue';
@@ -31,11 +31,7 @@
             },
             disabled: Boolean,
             changeOnSelect: Boolean,
-            trigger: {
-                validator (value) {
-                    return oneOf(value, ['click', 'hover']);
-                }
-            },
+            trigger: String,
             prefixCls: String
         },
         data () {
@@ -46,33 +42,32 @@
         },
         methods: {
             handleClickItem (item) {
-                if (this.trigger !== 'click') return;
+                if (this.trigger !== 'click' && item.children) return;
                 this.handleTriggerItem(item);
             },
             handleHoverItem (item) {
-                if (this.trigger !== 'hover') return;
+                if (this.trigger !== 'hover' || !item.children) return;
                 this.handleTriggerItem(item);
             },
-            handleTriggerItem (item) {
+            handleTriggerItem (item, fromInit = false) {
                 if (item.disabled) return;
 
+                // return value back recursion
+                const backItem = this.getBaseItem(item);
+                this.tmpItem = backItem;
+                this.emitUpdate([backItem]);
+
                 if (item.children && item.children.length){
                     this.sublist = item.children;
-                    // todo 实时选择
+                    this.$dispatch('on-result-change', false, this.changeOnSelect, fromInit);
                 } else {
                     this.sublist = [];
-                    // todo 选择
+                    this.$dispatch('on-result-change', true, this.changeOnSelect, fromInit);
                 }
-
-                // return value back
-                const backItem = this.getBaseItem(item);
-
-                this.tmpItem = backItem;
-                this.$emit('on-update-result', [backItem]);
             },
             updateResult (item) {
                 this.result = [this.tmpItem].concat(item);
-                this.$emit('on-update-result', this.result);
+                this.emitUpdate(this.result);
             },
             getBaseItem (item) {
                 let backItem = Object.assign({}, item);
@@ -81,6 +76,13 @@
                 }
 
                 return backItem;
+            },
+            emitUpdate (result) {
+                if (this.$parent.$options.name === 'Caspanel') {
+                    this.$parent.updateResult(result);
+                } else {
+                    this.$parent.$parent.updateResult(result);
+                }
             }
         },
         watch: {
@@ -88,8 +90,22 @@
                 this.sublist = [];
             }
         },
-        ready () {
-            // todo 初始化时，判断预设的值
+        events: {
+            'on-find-selected' (val) {
+                let value = [...val];
+                for (let i = 0; i < value.length; i++) {
+                    for (let j = 0; j < this.data.length; j++) {
+                        if (value[i] === this.data[j].value) {
+                            this.handleTriggerItem(this.data[j], true);
+                            value.splice(0, 1);
+                            this.$nextTick(() => {
+                                this.$broadcast('on-find-selected', value);
+                            });
+                            return false;
+                        }
+                    }
+                }
+            }
         }
     }
 </script>

test/routers/cascader.vue

@@ -1,6 +1,6 @@
 <template>
     <div style="margin: 50px;width:300px">
-        <Cascader :data="data" :value="value"></Cascader>
+        <Cascader :data="data" :value.sync="value" @on-change="change" trigger="click"></Cascader>
     </div>
 </template>
 <script>
@@ -11,7 +11,8 @@
         },
         data () {
             return {
-                value: [],
+                value: ['jiangsu', 'hhh', 'ddd'],
+//                value: [],
                 data: [{
                     value: 'zhejiang',
                     label: 'Zhejiang',
@@ -25,6 +26,7 @@
                     children: [{
                         value: 'nanjing',
                         label: 'Nanjing',
+//                        disabled: true,
                         children: [{
                             value: 'zhonghuamen',
                             label: 'Zhong Hua Men',
@@ -48,7 +50,9 @@
 
         },
         methods: {
-
+            change (data) {
+                console.log(data)
+            }
         }
     }
 </script>