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

Select: Fix #21290 

when multiple & collapse-tags are set and label is long the tags are going out of the border
pull/21503/head
Akshay Jat 2021-11-26 00:20:23 +05:30
parent 55bac06f0f
commit 0a600fbf83
1 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@
v-if="multiple" v-if="multiple"
ref="tags" ref="tags"
:style="{ 'max-width': inputWidth - 32 + 'px', width: '100%' }"> :style="{ 'max-width': inputWidth - 32 + 'px', width: '100%' }">
<span v-if="collapseTags && selected.length"> <span ref="collapseTags" v-if="collapseTags && selected.length">
<el-tag <el-tag
:closable="!selectDisabled" :closable="!selectDisabled"
:size="collapseTagSize" :size="collapseTagSize"
@ -348,6 +348,7 @@
value(val, oldVal) { value(val, oldVal) {
if (this.multiple) { if (this.multiple) {
this.resetInputHeight(); this.resetInputHeight();
this.resetTagWidth();
if ((val && val.length > 0) || (this.$refs.input && this.query !== '')) { if ((val && val.length > 0) || (this.$refs.input && this.query !== '')) {
this.currentPlaceholder = ''; this.currentPlaceholder = '';
} else { } else {
@ -567,6 +568,7 @@
this.selected = result; this.selected = result;
this.$nextTick(() => { this.$nextTick(() => {
this.resetInputHeight(); this.resetInputHeight();
this.resetTagWidth();
}); });
}, },
@ -645,6 +647,7 @@
if (e.keyCode !== 8) this.toggleLastOptionHitState(false); if (e.keyCode !== 8) this.toggleLastOptionHitState(false);
this.inputLength = this.$refs.input.value.length * 15 + 20; this.inputLength = this.$refs.input.value.length * 15 + 20;
this.resetInputHeight(); this.resetInputHeight();
this.resetTagWidth();
}, },
resetInputHeight() { resetInputHeight() {
@ -803,7 +806,11 @@
handleResize() { handleResize() {
this.resetInputWidth(); this.resetInputWidth();
if (this.multiple) this.resetInputHeight();
if (this.multiple) {
this.resetInputHeight();
this.resetTagWidth();
}
}, },
checkDefaultFirstOption() { checkDefaultFirstOption() {
@ -842,6 +849,18 @@
} else { } else {
return getValueByPath(item.value, this.valueKey); return getValueByPath(item.value, this.valueKey);
} }
},
resetTagWidth() {
if (!this.collapseTags && this.selected.length === 0) return;
this.$nextTick(() => {
if (!this.$refs.collapseTags || !this.$refs.collapseTags.childNodes.length === 0) return;
const [labelTag, countTag] = this.$refs.collapseTags.childNodes;
const collapseTagWidth = countTag.offsetWidth || 0;
const inputLength = this.$refs.input ? Math.min(50, this.$refs.input.value.length * 15 + 20) : 0;
// 12 - margin | 2 - tag width buffer
labelTag.style.maxWidth = `calc(100% - ${inputLength}px - ${collapseTagWidth + 12 + 2}px)`;
});
} }
}, },
@ -884,6 +903,7 @@
} }
if (this.remote && this.multiple) { if (this.remote && this.multiple) {
this.resetInputHeight(); this.resetInputHeight();
this.resetInputWidth();
} }
this.$nextTick(() => { this.$nextTick(() => {
if (reference && reference.$el) { if (reference && reference.$el) {