Cascader add transfer prop

梁灏
1 parent ecaf8d51
Showing 5 changed files with 99 additions and 13 deletions Show diff stats
examples/routers/cascader.vue
examples/routers/modal.vue
examples/routers/poptip.vue
src/components/cascader/cascader.vue
src/styles/components/cascader.less
 <template>
-    <Cascader v-model="value3" :data="data" filterable></Cascader>
+    <div style="width: 400px;">
+        <Row>
+            <i-col span="12">
+                <Cascader transfer v-model="value3" :data="data" filterable></Cascader>
+            </i-col>
+            <i-col span="12">
+                <Cascader v-model="value3" :data="data" filterable></Cascader>
+            </i-col>
+        </Row>
+    </div>
 </template>
 <script>
     export default {
@@ -5,10 +5,11 @@
         <Modal v-model="showModal" title="弹窗">
             <Tabs>
                 <Tab-pane label="演示" style="height: 80px;">
-                    <Date-picker transfer type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
-                    <i-select transfer multiple v-model="m1">
-                        <i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
-                    </i-select>
+                    <!--<Date-picker transfer type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>-->
+                    <!--<i-select transfer multiple v-model="m1">-->
+                        <!--<i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>-->
+                    <!--</i-select>-->
+                    <Cascader transfer :data="data4" :load-data="loadData"></Cascader>
                 </Tab-pane>
             </Tabs>
         </Modal>
@@ -51,6 +52,20 @@
                         value: 'chongqing',
                         label: '重庆市'
                     }
+                ],
+                data4: [
+                    {
+                        value: 'beijing',
+                        label: '北京',
+                        children: [],
+                        loading: false
+                    },
+                    {
+                        value: 'hangzhou',
+                        label: '杭州',
+                        children: [],
+                        loading:false
+                    }
                 ]
             }
         },
@@ -74,6 +89,40 @@
                 this.$refs["formSelect"].clearSingleSelect();
                 this.options = [];
                 // }, 300)
+            },
+            loadData (item, callback) {
+                item.loading = true;
+                setTimeout(() => {
+                    if (item.value === 'beijing') {
+                        item.children = [
+                            {
+                                value: 'talkingdata',
+                                label: 'TalkingData'
+                            },
+                            {
+                                value: 'baidu',
+                                label: '百度'
+                            },
+                            {
+                                value: 'sina',
+                                label: '新浪'
+                            }
+                        ];
+                    } else if (item.value === 'hangzhou') {
+                        item.children = [
+                            {
+                                value: 'ali',
+                                label: '阿里巴巴'
+                            },
+                            {
+                                value: '163',
+                                label: '网易'
+                            }
+                        ];
+                    }
+                    item.loading = false;
+                    callback();
+                }, 1000);
             }
         }
     }
@@ -3,7 +3,7 @@
         <Poptip trigger="hover" title="提示标题" content="提示内容">
             <Button>hover 激活</Button>
         </Poptip>
-        <Poptip title="提示标题" content="提示内容">
+        <Poptip transfer title="提示标题" content="提示内容">
             <Button>click 激活</Button>
         </Poptip>
         <Poptip trigger="focus" title="提示标题" content="提示内容">
 <template>
     <div :class="classes" v-clickoutside="handleClose">
-        <div :class="[prefixCls + '-rel']" @click="toggleOpen">
+        <div :class="[prefixCls + '-rel']" @click="toggleOpen" ref="reference">
             <slot>
                 <i-input
                     ref="input"
@@ -19,7 +19,12 @@
             </slot>
         </div>
         <transition name="slide-up">
-            <Drop v-show="visible">
+            <Drop
+                v-show="visible"
+                :class="{ [prefixCls + '-transfer']: transfer }"
+                ref="drop"
+                :data-transfer="transfer"
+                v-transfer-dom>
                 <div>
                     <Caspanel
                         v-show="!filterable || (filterable && query === '')"
@@ -51,6 +56,7 @@
     import Icon from '../icon/icon.vue';
     import Caspanel from './caspanel.vue';
     import clickoutside from '../../directives/clickoutside';
+    import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
     import Locale from '../../mixins/locale';
@@ -62,7 +68,7 @@
         name: 'Cascader',
         mixins: [ Emitter, Locale ],
         components: { iInput, Drop, Icon, Caspanel },
-        directives: { clickoutside },
+        directives: { clickoutside, TransferDom },
         props: {
             data: {
                 type: Array,
@@ -117,6 +123,10 @@
             },
             notFoundText: {
                 type: String
+            },
+            transfer: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -333,11 +343,17 @@
                     if (this.currentValue.length) {
                         this.updateSelected();
                     }
+                    if (this.transfer) {
+                        this.$refs.drop.update();
+                    }
                 } else {
                     if (this.filterable) {
                         this.query = '';
                         this.$refs.input.currentValue = '';
                     }
+                    if (this.transfer) {
+                        this.$refs.drop.destroy();
+                    }
                 }
                 this.$emit('on-visible-change', val);
             },
 @cascader-prefix-cls: ~"@{css-prefix}cascader";
 @cascader-item-prefix-cls: ~"@{css-prefix}cascader-menu-item";
+.selectDropDown{
+    width: auto;
+    padding: 0;
+    white-space: nowrap;
+    overflow: visible;
+}
+
 .@{cascader-prefix-cls} {
     //position: relative;
     line-height: normal;
@@ -64,10 +71,7 @@
     }
     .@{select-dropdown-prefix-cls} {
-        width: auto;
-        padding: 0;
-        white-space: nowrap;
-        overflow: visible;
+        .selectDropDown();
     }
     .select-item(@cascader-prefix-cls, @cascader-item-prefix-cls);
@@ -138,6 +142,14 @@
         }
     }
 }
+.@{cascader-prefix-cls}-transfer{
+    z-index: @zindex-transfer;
+    .selectDropDown();
+    .select-item(@cascader-prefix-cls, @cascader-item-prefix-cls);
+    .ivu-select-item span{
+        color: @error-color;
+    }
+}
 .@{form-item-prefix-cls}-error{
     .@{cascader-prefix-cls} {