Cascader support slot

Cascader support slot

src/components/cascader/cascader.vue

@@ -1,14 +1,17 @@
 <template>
     <div :class="classes" v-clickoutside="handleClose">
+        <div :class="[prefixCls + '-rel']" @click="toggleOpen">
+            <slot>
                 <i-input
                     readonly
                     :disabled="disabled"
                     :value.sync="displayRender"
                     :size="size"
-            :placeholder="placeholder"
-            @on-focus="onFocus"></i-input>
+                    :placeholder="placeholder"></i-input>
                 <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSelect"></Icon>
                 <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
+            </slot>
+        </div>
         <Dropdown v-show="visible" transition="slide-up">
             <div>
                 <Caspanel
@@ -125,6 +128,13 @@
             handleClose () {
                 this.visible = false;
             },
+            toggleOpen () {
+                if (this.visible) {
+                    this.handleClose();
+                } else {
+                    this.onFocus();
+                }
+            },
             onFocus () {
                 this.visible = true;
                 if (!this.value.length) {

src/styles/components/cascader.less

@@ -2,9 +2,13 @@
 @cascader-item-prefix-cls: ~"@{css-prefix}cascader-menu-item";
 
 .@{cascader-prefix-cls} {
-    position: relative;
+    //position: relative;
     line-height: normal;
 
+    &-rel{
+        position: relative;
+    }
+
     .@{css-prefix}input{
         display: block;
         cursor: pointer;

test/routers/cascader.vue

@@ -1,18 +1,15 @@
 <template>
-    <Cascader :data="data" :value.sync="value" change-on-select></Cascader>
+    {{ text }}
+    <Cascader :data="data" @on-change="handleChange">
+        <a href="javascript:void(0)">选择</a>
+    </Cascader>
 </template>
 <script>
     export default {
         data () {
             return {
-                value: [],
-                data: []
-            }
-        },
-        methods: {
-            updateData () {
-                setTimeout(() => {
-                    this.data = [{
+                text: '未选择',
+                data: [{
                     value: 'beijing',
                     label: '北京',
                     children: [
@@ -39,7 +36,7 @@
                             children: [
                                 {
                                     value: 'fuzimiao',
-                                        label: '夫子庙'
+                                    label: '夫子庙',
                                 }
                             ]
                         },
@@ -49,24 +46,22 @@
                             children: [
                                 {
                                     value: 'zhuozhengyuan',
-                                        label: '拙政园'
+                                    label: '拙政园',
                                 },
                                 {
                                     value: 'shizilin',
-                                        label: '狮子林'
+                                    label: '狮子林',
                                 }
                             ]
                         }
-                        ]
-                    }];
-                    setTimeout(() => {
-                        this.value = ['beijing', 'tiantan'];
-                    }, 1000);
-                }, 1000);
+                    ],
+                }]
             }
         },
-        ready () {
-            this.updateData();
+        methods: {
+            handleChange (value, selectedData) {
+                this.text = selectedData.map(o => o.label).join(', ');
+            }
         }
     }
 </script>