mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-24 11:05:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(select): fix content overflow in multiple select (#967)

Browse Source 
* fix(select): fix content overflow in multiple select

fix content overflow in multiple select

fix #919

* style(select): change the inline style

change the inline style

* test(select): add test case

add test case for the multiple select
This commit is contained in:
SuMingJiong 2020-12-17 16:51:59 +08:00 committed by GitHub
parent 1bc545bdb1
commit ad59057506
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 116 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
packages/select/__tests__/select.spec.ts
View File

@ -327,6 +327,113 @@ describe('Select', () => {
expect(vm.value.indexOf('选项1')).toBe(-1)
})
test('multiple select when content overflow', async () => {
const wrapper = _mount(`
<el-select v-model="selectedList" multiple placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
`,
() => ({
options: [{
value: '选项1',
label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕',
}, {
value: '选项2',
label: '双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶',
}, {
value: '选项3',
label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎',
}, {
value: '选项4',
label: '龙须面',
}, {
value: '选项5',
label: '北京烤鸭',
}],
selectedList: [],
}))
await wrapper.find('.select-trigger').trigger('click')
const options = getOptions()
const selectWrapper = wrapper.findComponent(Select)
const inputWrapper = selectWrapper.findComponent({ ref: 'reference' })
const inputDom = inputWrapper.element
const inputRect = {
height: 40,
width: 221,
x:44,
y:8,
top:8,
}
const mockInputWidth = jest.spyOn(inputDom, 'getBoundingClientRect').mockReturnValue(inputRect as DOMRect)
selectWrapper.vm.handleResize()
options[0].click()
await nextTick()
options[1].click()
await nextTick()
options[2].click()
await nextTick()
const tagWrappers = wrapper.findAll('.el-select__tags-text')
for(let i=0;i<tagWrappers.length;i++) {
const tagWrapperDom = tagWrappers[i].element
expect(parseInt(tagWrapperDom.style.maxWidth) === inputRect.width - 75).toBe(true)
}
mockInputWidth.mockRestore()
})
test('multiple select with collapseTags when content overflow', async () => {
const wrapper = _mount(`
<el-select v-model="selectedList" multiple collapseTags placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
`,
() => ({
options: [{
value: '选项1',
label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕',
}, {
value: '选项2',
label: '双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶',
}, {
value: '选项3',
label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎',
}, {
value: '选项4',
label: '龙须面',
}, {
value: '选项5',
label: '北京烤鸭',
}],
selectedList: [],
}))
await wrapper.find('.select-trigger').trigger('click')
const options = getOptions()
const selectWrapper = wrapper.findComponent(Select)
const inputWrapper = selectWrapper.findComponent({ ref: 'reference' })
const inputDom = inputWrapper.element
const inputRect = {
height: 40,
width: 221,
x:44,
y:8,
top:8,
}
const mockInputWidth = jest.spyOn(inputDom, 'getBoundingClientRect').mockReturnValue(inputRect as DOMRect)
selectWrapper.vm.handleResize()
options[0].click()
await nextTick()
options[1].click()
await nextTick()
options[2].click()
await nextTick()
const tagWrappers = wrapper.findAll('.el-select__tags-text')
const tagWrapperDom = tagWrappers[0].element
console.log(tagWrapperDom.style.maxWidth)
expect(parseInt(tagWrapperDom.style.maxWidth) === inputRect.width - 123).toBe(true)
mockInputWidth.mockRestore()
})
test('multiple remove-tag', async () => {
const wrapper = _mount(`
<el-select v-model="value" multiple @remove-tag="handleRemoveTag">

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

@ -37,7 +37,7 @@
disable-transitions
@close="deleteTag($event, selected[0])"
>
<span class="el-select__tags-text">{{ selected[0].currentLabel }}</span>
<span class="el-select__tags-text" :style="{ 'max-width': inputWidth - 123 + 'px' }">{{ selected[0].currentLabel }}</span>
</el-tag>
<el-tag
v-if="selected.length > 1"
@ -62,7 +62,7 @@
disable-transitions
@close="deleteTag($event, item)"
>
<span class="el-select__tags-text">{{ item.currentLabel }}</span>
<span class="el-select__tags-text" :style="{ 'max-width': inputWidth - 75 + 'px' }">{{ item.currentLabel }}</span>
</el-tag>
</span>
</transition>

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

@ -30,6 +30,13 @@
}
}
.el-select__tags-text {
text-overflow: ellipsis;
display: inline-block;
overflow-x: hidden;
vertical-align: bottom;
}
.el-input__inner {
cursor: pointer;
padding-right: 35px;