update Cascader

This commit is contained in:
梁灏 2017-05-11 17:17:44 +08:00
parent 2fcd34da74
commit 3ae11e8576
2 changed files with 57 additions and 5 deletions

View file

@ -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);
}, },

View file

@ -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;