diff --git a/src/components/cascader/cascader.vue b/src/components/cascader/cascader.vue index 5931fac..f7111c4 100644 --- a/src/components/cascader/cascader.vue +++ b/src/components/cascader/cascader.vue @@ -3,12 +3,17 @@
+ :placeholder="inputPlaceholder"> +
{{ displayRender }}
@@ -47,13 +52,14 @@ import clickoutside from '../../directives/clickoutside'; import { oneOf } from '../../utils/assist'; import Emitter from '../../mixins/emitter'; + import Locale from '../../mixins/locale'; const prefixCls = 'ivu-cascader'; const selectPrefixCls = 'ivu-select'; export default { name: 'Cascader', - mixins: [ Emitter ], + mixins: [ Emitter, Locale ], components: { iInput, Drop, Icon, Caspanel }, directives: { clickoutside }, props: { @@ -78,8 +84,7 @@ default: true }, placeholder: { - type: String, - default: '请选择' + type: String }, size: { validator (value) { @@ -128,6 +133,7 @@ `${prefixCls}`, { [`${prefixCls}-show-clear`]: this.showCloseIcon, + [`${prefixCls}-size-${this.size}`]: !!this.size, [`${prefixCls}-visible`]: this.visible, [`${prefixCls}-disabled`]: this.disabled } @@ -144,6 +150,19 @@ 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 () { let selections = []; function getSelections (arr, label, value) { @@ -226,11 +245,16 @@ const item = this.querySelections[index]; if (item.item.disabled) return false; + // todo 还有bug,选完,删除后,失焦,不能回到上次选择的 this.query = ''; + this.$refs.input.currentValue = ''; const oldVal = JSON.stringify(this.currentValue); this.currentValue = item.value.split(','); this.emitValue(this.currentValue, oldVal); this.handleClose(); + }, + handleFocus () { + this.$refs.input.focus(); } }, created () { @@ -270,6 +294,11 @@ if (this.currentValue.length) { this.updateSelected(); } + } else { + if (this.filterable) { + this.query = ''; + this.$refs.input.currentValue = ''; + } } this.$emit('on-visible-change', val); }, diff --git a/src/styles/components/cascader.less b/src/styles/components/cascader.less index 71a160e..1c8e03d 100644 --- a/src/styles/components/cascader.less +++ b/src/styles/components/cascader.less @@ -19,6 +19,29 @@ 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) { display: none; cursor: pointer; -- libgit2 0.21.4