github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Select: fix filter input display in multiple mode

pull/8978/head
Leopoldthecoder 2017-11-23 11:08:39 +08:00 committed by 杨奕
parent d6c35bffaa
commit e033313608
4 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/docs/en-US/select.md
View File

@ -368,7 +368,8 @@ Multiple select uses tags to display selected options.
value: 'Option5', value: 'Option5',
label: 'Option5' label: 'Option5'
}], }],
value5: [] value5: [],
value11: []
} }
} }
} }

3
examples/docs/zh-CN/select.md
View File

@ -367,7 +367,8 @@
value: '选项5', value: '选项5',
label: '北京烤鸭' label: '北京烤鸭'
}], }],
value5: [] value5: [],
value11: []
} }
} }
} }

8
packages/select/src/select.vue
View File

@ -11,6 +11,7 @@
:style="{ 'max-width': inputWidth - 32 + 'px' }"> :style="{ 'max-width': inputWidth - 32 + 'px' }">
<span <span
class="el-select__multiple-text" class="el-select__multiple-text"
v-show="multipleText"
v-if="collapseTags"> v-if="collapseTags">
{{ multipleText }} {{ multipleText }}
</span> </span>
@ -65,8 +66,8 @@
@blur="handleBlur" @blur="handleBlur"
@mousedown.native="handleMouseDown" @mousedown.native="handleMouseDown"
@keyup.native="debouncedOnInputChange" @keyup.native="debouncedOnInputChange"
@keydown.native.down.prevent="navigateOptions('next')" @keydown.native.down.stop.prevent="navigateOptions('next')"
@keydown.native.up.prevent="navigateOptions('prev')" @keydown.native.up.stop.prevent="navigateOptions('prev')"
@keydown.native.enter.prevent="selectOption" @keydown.native.enter.prevent="selectOption"
@keydown.native.esc.stop.prevent="visible = false" @keydown.native.esc.stop.prevent="visible = false"
@keydown.native.tab="visible = false" @keydown.native.tab="visible = false"
@ -375,7 +376,8 @@
}); });
this.hoverIndex = -1; this.hoverIndex = -1;
if (this.multiple && this.filterable) { if (this.multiple && this.filterable) {
this.inputLength = this.$refs.input.value.length * 15 + 20; const length = this.$refs.input.value.length * 15 + 20;
this.inputLength = this.collapseTags ? Math.min(50, length) : length;
this.managePlaceholder(); this.managePlaceholder();
this.resetInputHeight(); this.resetInputHeight();
} }

2
packages/theme-chalk/src/select.scss
View File

@ -93,7 +93,7 @@
margin-left: 15px; margin-left: 15px;
color: $--input-color; color: $--input-color;
font-size: $--font-size-base; font-size: $--font-size-base;
display: block; display: inline;
@include utils-ellipsis; @include utils-ellipsis;
} }