update Cascader

update Cascader

update Cascader
梁灏
1 parent ba3e34e0
Showing 3 changed files with 65 additions and 1 deletions Show diff stats
src/components/cascader/cascader.vue
src/styles/components/cascader.less
test/routers/form.vue
@@ -141,6 +141,7 @@
             emitValue (val, oldVal) {
                 if (JSON.stringify(val) !== oldVal) {
                     this.$emit('on-change', this.value, JSON.parse(JSON.stringify(this.selected)));
+                    this.$dispatch('on-form-change', this.value, JSON.parse(JSON.stringify(this.selected)));
                 }
             }
         },
@@ -168,6 +169,12 @@
                 if (lastValue && !fromInit) {
                     this.handleClose();
                 }
+            },
+            'on-form-blur' () {
+                return false;
+            },
+            'on-form-change' () {
+                return false;
             }
         },
         watch: {
@@ -3,6 +3,7 @@
  
 .@{cascader-prefix-cls} {
     position: relative;
+    line-height: normal;
  
     .@{css-prefix}input{
         display: block;
@@ -155,6 +155,9 @@
             <form-item label="两个日期" prop="date2">
                 <Date-picker :value.sync="form.date2" type="daterange" placement="bottom-start" placeholder="选择日期" @on-change="c"></Date-picker>
             </form-item>
+            <form-item label="级联" prop="cascader">
+                <Cascader :data="data" :value.sync="form.cascader"></Cascader>
+            </form-item>
             <form-item>
                 <i-button type="primary" @click="onSubmit('form')">提交</i-button>
             </form-item>
@@ -166,6 +169,53 @@
         props: {},
         data () {
             return {
+                data: [{
+                    value: 'beijing',
+                    label: '北京',
+                    children: [
+                        {
+                            value: 'gugong',
+                            label: '故宫'
+                        },
+                        {
+                            value: 'tiantan',
+                            label: '天坛'
+                        },
+                        {
+                            value: 'wangfujing',
+                            label: '王府井'
+                        }
+                    ]
+                }, {
+                    value: 'jiangsu',
+                    label: '江苏',
+                    children: [
+                        {
+                            value: 'nanjing',
+                            label: '南京',
+                            children: [
+                                {
+                                    value: 'fuzimiao',
+                                    label: '夫子庙',
+                                }
+                            ]
+                        },
+                        {
+                            value: 'suzhou',
+                            label: '苏州',
+                            children: [
+                                {
+                                    value: 'zhuozhengyuan',
+                                    label: '拙政园',
+                                },
+                                {
+                                    value: 'shizilin',
+                                    label: '狮子林',
+                                }
+                            ]
+                        }
+                    ],
+                }],
                 cityList: [
                     {
                         value: 'beijing',
@@ -202,7 +252,8 @@
                     selectm: [],
                     slider: [40, 50],
                     date: '',
-                    date2: ''
+                    date2: '',
+                    cascader: []
                 },
                 rules: {
                     mail: [
@@ -272,6 +323,11 @@
                                 }
                             }
                         }
+                    ],
+                    cascader: [
+                        {
+                            type: 'array', required: true
+                        }
                     ]
                 }
             }