javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [select-v2]add collapse-tags-tooltip (#6532)

Browse Source 
* feat(components): [select-v2]add collapse-tags-tooltip

* feat(components): [select-v2]set fallback-placements

* feat(components): [select-v2]add collapse-tags-tooltip

* feat(components): [select-v2]set fallback-placements

* feat(components): [select-v2]add v-if on tooltip
This commit is contained in:
Alan Wang
2022-03-11 02:56:35 -05:00
committed by GitHub
parent 57d08f9a78
commit a3e3acc0fc
5 changed files with 139 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/en-US/component/select-v2.md
View File

@@ -39,6 +39,8 @@ select-v2/multiple
## Hide extra tags when the selected items are too many.
You can collapse tags to a text by using `collapse-tags` attribute. You can check them when mouse hover collapse text by using `collapse-tags-tooltip` attribute.
:::demo
select-v2/hide-extra-tags
@@ -135,6 +137,7 @@ select-v2/remote-search
| clearable | whether select can be cleared | boolean | — | false |
| clear-icon | custom clear icon | string / component | — | CircleClose |
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | true / false | false |
| multiple-limit | maximum number of options user can select when multiple is true. No limit when set to 0 | number | — | 0 |
| name | the name attribute of select input | string | — | — |
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |

32
docs/examples/select-v2/hide-extra-tags.vue
View File

@@ -1,12 +1,27 @@
<template>
<el-select-v2
v-model="value"
:options="options"
placeholder="Please select"
style="width: 240px"
multiple
collapse-tags
/>
<div style="display: inline-block">
<p style="margin: 10px">use collapse-tags</p>
<el-select-v2
v-model="value"
:options="options"
placeholder="Please select"
style="width: 240px"
multiple
collapse-tags
/>
</div>
<div style="display: inline-block; margin-left: 20px">
<p style="margin: 10px">use collapse-tags-tooltip</p>
<el-select-v2
v-model="value2"
:options="options"
placeholder="Please select"
style="width: 240px"
multiple
collapse-tags
collapse-tags-tooltip
/>
</div>
</template>
<script lang="ts" setup>
@@ -14,6 +29,7 @@ import { ref } from 'vue'
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const value = ref([])
const value2 = ref([])
const options = Array.from({ length: 1000 }).map((_, idx) => ({
value: `Option ${idx + 1}`,
label: `${initials[idx % 10]}${idx}`,

62
packages/components/select-v2/__tests__/select.spec.ts
View File

@@ -52,6 +52,8 @@ interface SelectProps {
disabled?: boolean
clearable?: boolean
multiple?: boolean
collapseTags?: boolean
collapseTagsTooltip?: boolean
filterable?: boolean
remote?: boolean
multipleLimit?: number
@@ -101,6 +103,8 @@ const createSelect = (
:disabled="disabled"
:clearable="clearable"
:multiple="multiple"
:collapseTags="collapseTags"
:collapseTagsTooltip="collapseTagsTooltip"
:filterable="filterable"
:multiple-limit="multipleLimit"
:popper-append-to-body="popperAppendToBody"
@@ -141,6 +145,8 @@ const createSelect = (
disabled: false,
clearable: false,
multiple: false,
collapseTags: false,
collapseTagsTooltip: false,
remote: false,
filterable: false,
reserveKeyword: false,
@@ -559,6 +565,62 @@ describe('Select', () => {
})
})
describe('collapseTags', () => {
it('use collapseTags', async () => {
const wrapper = createSelect({
data: () => {
return {
multiple: true,
collapseTags: true,
value: [],
}
},
})
await nextTick()
const vm = wrapper.vm as any
const options = getOptions()
options[0].click()
await nextTick()
expect(vm.value.length).toBe(1)
expect(vm.value[0]).toBe(vm.options[0].value)
options[1].click()
await nextTick()
options[2].click()
await nextTick()
expect(vm.value.length).toBe(3)
const tags = wrapper.findAll('.el-tag').filter((item) => {
return !hasClass(item.element, 'in-tooltip')
})
expect(tags.length).toBe(2)
})
it('use collapseTagsTooltip', async () => {
const wrapper = createSelect({
data: () => {
return {
multiple: true,
collapseTags: true,
collapseTagsTooltip: true,
value: [],
}
},
})
await nextTick()
const vm = wrapper.vm as any
const options = getOptions()
options[0].click()
await nextTick()
expect(vm.value.length).toBe(1)
expect(vm.value[0]).toBe(vm.options[0].value)
options[1].click()
await nextTick()
options[2].click()
await nextTick()
expect(vm.value.length).toBe(3)
expect(wrapper.findAll('.el-tag')[4].element.textContent).toBe('c2')
})
})
describe('manually set modelValue', () => {
it('set modelValue in single select', async () => {
const wrapper = createSelect({

4
packages/components/select-v2/src/defaults.ts
View File

@@ -24,6 +24,10 @@ export const SelectProps = {
default: 'light',
},
collapseTags: Boolean,
collapseTagsTooltip: {
type: Boolean,
default: false,
},
defaultFirstOption: Boolean,
disabled: Boolean,
estimatedOptionHeight: {

46
packages/components/select-v2/src/select.vue
View File

@@ -66,7 +66,53 @@
type="info"
disable-transitions
>
<el-tooltip
v-if="collapseTagsTooltip"
:disabled="dropdownMenuVisible"
:fallback-placements="['bottom', 'top', 'right', 'left']"
:effect="effect"
placement="bottom"
:teleported="false"
>
<template #default>
<span
:class="nsSelectV2.e('tags-text')"
:style="{
maxWidth: `${tagMaxWidth}px`,
}"
>+ {{ modelValue.length - 1 }}</span
>
</template>
<template #content>
<div :class="nsSelectV2.e('selection')">
<div
v-for="(selected, idx) in states.cachedOptions"
:key="idx"
:class="nsSelectV2.e('selected-item')"
>
<el-tag
:key="getValueKey(selected)"
:closable="!selectDisabled && !selected.disabled"
:size="collapseTagSize"
class="in-tooltip"
type="info"
disable-transitions
@close="deleteTag($event, selected)"
>
<span
:class="nsSelectV2.e('tags-text')"
:style="{
maxWidth: `${tagMaxWidth}px`,
}"
>{{ getLabel(selected) }}</span
>
</el-tag>
</div>
</div>
</template>
</el-tooltip>
<span
v-else
:class="nsSelectV2.e('tags-text')"
:style="{
maxWidth: `${tagMaxWidth}px`,