update Cascader
This commit is contained in:
parent
2fcd34da74
commit
3ae11e8576
2 changed files with 57 additions and 5 deletions
|
@ -3,12 +3,17 @@
|
||||||
<div :class="[prefixCls + '-rel']" @click="toggleOpen">
|
<div :class="[prefixCls + '-rel']" @click="toggleOpen">
|
||||||
<slot>
|
<slot>
|
||||||
<i-input
|
<i-input
|
||||||
|
ref="input"
|
||||||
:readonly="!filterable"
|
:readonly="!filterable"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:value="displayRender"
|
:value="displayInputRender"
|
||||||
@on-change="handleInput"
|
@on-change="handleInput"
|
||||||
:size="size"
|
:size="size"
|
||||||
:placeholder="placeholder"></i-input>
|
:placeholder="inputPlaceholder"></i-input>
|
||||||
|
<div
|
||||||
|
:class="[prefixCls + '-label']"
|
||||||
|
v-show="filterable && query === ''"
|
||||||
|
@click="handleFocus">{{ displayRender }}</div>
|
||||||
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
|
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
|
||||||
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
|
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
|
||||||
</slot>
|
</slot>
|
||||||
|
@ -47,13 +52,14 @@
|
||||||
import clickoutside from '../../directives/clickoutside';
|
import clickoutside from '../../directives/clickoutside';
|
||||||
import { oneOf } from '../../utils/assist';
|
import { oneOf } from '../../utils/assist';
|
||||||
import Emitter from '../../mixins/emitter';
|
import Emitter from '../../mixins/emitter';
|
||||||
|
import Locale from '../../mixins/locale';
|
||||||
|
|
||||||
const prefixCls = 'ivu-cascader';
|
const prefixCls = 'ivu-cascader';
|
||||||
const selectPrefixCls = 'ivu-select';
|
const selectPrefixCls = 'ivu-select';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Cascader',
|
name: 'Cascader',
|
||||||
mixins: [ Emitter ],
|
mixins: [ Emitter, Locale ],
|
||||||
components: { iInput, Drop, Icon, Caspanel },
|
components: { iInput, Drop, Icon, Caspanel },
|
||||||
directives: { clickoutside },
|
directives: { clickoutside },
|
||||||
props: {
|
props: {
|
||||||
|
@ -78,8 +84,7 @@
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
placeholder: {
|
placeholder: {
|
||||||
type: String,
|
type: String
|
||||||
default: '请选择'
|
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
validator (value) {
|
validator (value) {
|
||||||
|
@ -128,6 +133,7 @@
|
||||||
`${prefixCls}`,
|
`${prefixCls}`,
|
||||||
{
|
{
|
||||||
[`${prefixCls}-show-clear`]: this.showCloseIcon,
|
[`${prefixCls}-show-clear`]: this.showCloseIcon,
|
||||||
|
[`${prefixCls}-size-${this.size}`]: !!this.size,
|
||||||
[`${prefixCls}-visible`]: this.visible,
|
[`${prefixCls}-visible`]: this.visible,
|
||||||
[`${prefixCls}-disabled`]: this.disabled
|
[`${prefixCls}-disabled`]: this.disabled
|
||||||
}
|
}
|
||||||
|
@ -144,6 +150,19 @@
|
||||||
|
|
||||||
return this.renderFormat(label, this.selected);
|
return this.renderFormat(label, this.selected);
|
||||||
},
|
},
|
||||||
|
displayInputRender () {
|
||||||
|
return this.filterable ? '' : this.displayRender;
|
||||||
|
},
|
||||||
|
localePlaceholder () {
|
||||||
|
if (this.placeholder === undefined) {
|
||||||
|
return this.t('i.select.placeholder');
|
||||||
|
} else {
|
||||||
|
return this.placeholder;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inputPlaceholder () {
|
||||||
|
return this.filterable && this.currentValue.length ? null : this.localePlaceholder;
|
||||||
|
},
|
||||||
querySelections () {
|
querySelections () {
|
||||||
let selections = [];
|
let selections = [];
|
||||||
function getSelections (arr, label, value) {
|
function getSelections (arr, label, value) {
|
||||||
|
@ -226,11 +245,16 @@
|
||||||
const item = this.querySelections[index];
|
const item = this.querySelections[index];
|
||||||
|
|
||||||
if (item.item.disabled) return false;
|
if (item.item.disabled) return false;
|
||||||
|
// todo 还有bug,选完,删除后,失焦,不能回到上次选择的
|
||||||
this.query = '';
|
this.query = '';
|
||||||
|
this.$refs.input.currentValue = '';
|
||||||
const oldVal = JSON.stringify(this.currentValue);
|
const oldVal = JSON.stringify(this.currentValue);
|
||||||
this.currentValue = item.value.split(',');
|
this.currentValue = item.value.split(',');
|
||||||
this.emitValue(this.currentValue, oldVal);
|
this.emitValue(this.currentValue, oldVal);
|
||||||
this.handleClose();
|
this.handleClose();
|
||||||
|
},
|
||||||
|
handleFocus () {
|
||||||
|
this.$refs.input.focus();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
|
@ -270,6 +294,11 @@
|
||||||
if (this.currentValue.length) {
|
if (this.currentValue.length) {
|
||||||
this.updateSelected();
|
this.updateSelected();
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
if (this.filterable) {
|
||||||
|
this.query = '';
|
||||||
|
this.$refs.input.currentValue = '';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
this.$emit('on-visible-change', val);
|
this.$emit('on-visible-change', val);
|
||||||
},
|
},
|
||||||
|
|
|
@ -19,6 +19,29 @@
|
||||||
cursor: @cursor-disabled;
|
cursor: @cursor-disabled;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-label{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 32px;
|
||||||
|
padding: 0 7px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: @font-size-small;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
&-size-large &-label{
|
||||||
|
line-height: 36px;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
}
|
||||||
|
&-size-small &-label{
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
.@{cascader-prefix-cls}-arrow:nth-of-type(1) {
|
.@{cascader-prefix-cls}-arrow:nth-of-type(1) {
|
||||||
display: none;
|
display: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue