From a9cd43b39c12722b526ab3face7427e432ab3ff3 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Thu, 20 Jul 2017 16:00:03 +0800
Subject: [PATCH] Cascader add transfer prop
---
examples/routers/cascader.vue | 11 ++++++++++-
examples/routers/modal.vue | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++----
examples/routers/poptip.vue | 2 +-
src/components/cascader/cascader.vue | 22 +++++++++++++++++++---
src/styles/components/cascader.less | 20 ++++++++++++++++----
5 files changed, 99 insertions(+), 13 deletions(-)
diff --git a/examples/routers/cascader.vue b/examples/routers/cascader.vue
index 3fe2c77..734cfa5 100644
--- a/examples/routers/cascader.vue
+++ b/examples/routers/cascader.vue
@@ -1,5 +1,14 @@
<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 {
diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index b1e3f70..865f2aa 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -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);
}
}
}
diff --git a/examples/routers/poptip.vue b/examples/routers/poptip.vue
index f5d4e3f..8d5f7f4 100644
--- a/examples/routers/poptip.vue
+++ b/examples/routers/poptip.vue
@@ -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="提示内容">
diff --git a/src/components/cascader/cascader.vue b/src/components/cascader/cascader.vue
index 926b4bf..ec52ecd 100644
--- a/src/components/cascader/cascader.vue
+++ b/src/components/cascader/cascader.vue
@@ -1,6 +1,6 @@
<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);
},
diff --git a/src/styles/components/cascader.less b/src/styles/components/cascader.less
index d5726a5..f37283b 100644
--- a/src/styles/components/cascader.less
+++ b/src/styles/components/cascader.less
@@ -1,6 +1,13 @@
@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} {
--
libgit2 0.21.4