From 75e5c6a51ea070a2c9d40ddae18267f48c409be9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Mon, 16 Jan 2017 17:46:51 +0800
Subject: [PATCH] Cascader support slot

Cascader support slot
---
 src/components/cascader/cascader.vue |  28 ++++---
 src/styles/components/cascader.less  |   6 +-
 test/routers/cascader.vue            | 113 +++++++++++++--------------
 3 files changed, 78 insertions(+), 69 deletions(-)

diff --git a/src/components/cascader/cascader.vue b/src/components/cascader/cascader.vue
index 95285c96..9f3bcebc 100644
--- a/src/components/cascader/cascader.vue
+++ b/src/components/cascader/cascader.vue
@@ -1,14 +1,17 @@
 <template>
     <div :class="classes" v-clickoutside="handleClose">
-        <i-input
-            readonly
-            :disabled="disabled"
-            :value.sync="displayRender"
-            :size="size"
-            :placeholder="placeholder"
-            @on-focus="onFocus"></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>
+        <div :class="[prefixCls + '-rel']" @click="toggleOpen">
+            <slot>
+                <i-input
+                    readonly
+                    :disabled="disabled"
+                    :value.sync="displayRender"
+                    :size="size"
+                    :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) {
diff --git a/src/styles/components/cascader.less b/src/styles/components/cascader.less
index 9e387b57..a6a79d51 100644
--- a/src/styles/components/cascader.less
+++ b/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;
diff --git a/test/routers/cascader.vue b/test/routers/cascader.vue
index d73eb943..eb45d84f 100644
--- a/test/routers/cascader.vue
+++ b/test/routers/cascader.vue
@@ -1,72 +1,67 @@
 <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: []
+                text: '未选择',
+                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: '狮子林',
+                                }
+                            ]
+                        }
+                    ],
+                }]
             }
         },
         methods: {
-            updateData () {
-                setTimeout(() => {
-                    this.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: '狮子林'
-                                    }
-                                ]
-                            }
-                        ]
-                    }];
-                    setTimeout(() => {
-                        this.value = ['beijing', 'tiantan'];
-                    }, 1000);
-                }, 1000);
+            handleChange (value, selectedData) {
+                this.text = selectedData.map(o => o.label).join(', ');
             }
-        },
-        ready () {
-            this.updateData();
         }
     }
 </script>