Cascader add transfer prop
This commit is contained in:
梁灏
parent
ecaf8d51e0
commit
a9cd43b39c
5 changed files with 99 additions and 13 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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="提示内容">
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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} {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue