Skip to content

Commit 9b53d76

Browse files
discreted66discreted66
authored
feat:添加select-wrapper组件demo以及用例 (#3863)
1 parent c29d747 commit 9b53d76

File tree

141 files changed

+10597
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

141 files changed

+10597
-0
lines changed

‎examples/sites/demos/apis/select-wrapper.js‎

Lines changed: 1067 additions & 0 deletions
Large diffs are not rendered by default.

‎examples/sites/demos/pc/app/select-wrapper/all-text-composition-api.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div>
3+
<div style="margin: 16px 0">全选后，显示多个 tag</div>
4+
<tiny-select v-model="value" multiple all-text="全部小吃">
5+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
6+
</tiny-select>
7+
8+
<div style="margin: 16px 0">全选后，显示自定义的全部 Tag</div>
9+
<tiny-select v-model="value1" multiple all-text="全部小吃" show-all-text-tag>
10+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
11+
</tiny-select>
12+
</div>
13+
</template>
14+
15+
<script setup>
16+
import { ref } from 'vue'
17+
import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
18+
19+
const options = ref([
20+
{ value: '选项 1', label: '黄金糕' },
21+
{ value: '选项 2', label: '双皮奶' },
22+
{ value: '选项 3', label: '蚵仔煎' },
23+
{ value: '选项 4', label: '龙须面' },
24+
{ value: '选项 6', label: '螺蛳粉' }
25+
])
26+
27+
const value = ref([])
28+
const value1 = ref([])
29+
</script>
30+
31+
<style lang="less" scoped>
32+
.tiny-select {
33+
width: 280px;
34+
}
35+
</style>

‎examples/sites/demos/pc/app/select-wrapper/all-text.spec.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { expect, test } from '@playwright/test'
2+
3+
test('多选时自定义全部的文本', async ({ page }) => {
4+
page.on('pageerror', (exception) => expect(exception).toBeNull())
5+
await page.goto('select#all-text')
6+
const wrap = page.locator('#all-text')
7+
const select = wrap.locator('.tiny-select').nth(0)
8+
const dropdown = page.locator('body > .tiny-select-dropdown')
9+
const option = dropdown.locator('.tiny-option')
10+
11+
await select.locator('.tiny-input__suffix').click()
12+
await expect(option.filter({ hasText: '全部小吃' })).toHaveCount(1)
13+
})

‎examples/sites/demos/pc/app/select-wrapper/all-text.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div>
3+
<div style="margin: 16px 0">全选后，显示多个 tag</div>
4+
<tiny-select v-model="value" multiple all-text="全部小吃">
5+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
6+
</tiny-select>
7+
8+
<div style="margin: 16px 0">全选后，显示自定义的全部 Tag</div>
9+
<tiny-select v-model="value1" multiple all-text="全部小吃" show-all-text-tag>
10+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
11+
</tiny-select>
12+
</div>
13+
</template>
14+
15+
<script>
16+
import { TinySelect, TinyOption } from '@opentiny/vue'
17+
18+
export default {
19+
components: {
20+
TinySelect,
21+
TinyOption
22+
},
23+
data() {
24+
return {
25+
value: [],
26+
value1: [],
27+
options: [
28+
{ value: '选项 1', label: '黄金糕' },
29+
{ value: '选项 2', label: '双皮奶' },
30+
{ value: '选项 3', label: '蚵仔煎' },
31+
{ value: '选项 4', label: '龙须面' },
32+
{ value: '选项 6', label: '螺蛳粉' }
33+
]
34+
}
35+
}
36+
}
37+
</script>
38+
39+
<style lang="less" scoped>
40+
.tiny-select {
41+
width: 280px;
42+
}
43+
</style>

‎examples/sites/demos/pc/app/select-wrapper/allow-create-composition-api.vue‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<template>
2+
<div>
3+
<div>场景 1：allow-create + filterable，点击创建条目</div>
4+
<br />
5+
<tiny-select v-model="value" allow-create filterable>
6+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
7+
</tiny-select>
8+
<br />
9+
<br />
10+
<div>场景 2：allow-create + filterable + default-first-option，Enter 键创建条目</div>
11+
<br />
12+
<tiny-select v-model="value" allow-create filterable default-first-option>
13+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
14+
</tiny-select>
15+
<br />
16+
<br />
17+
<div>场景 3：下拉框显示新增按钮</div>
18+
<br />
19+
<tiny-select
20+
v-model="value"
21+
placeholder="请选择"
22+
@top-create-click="handleAddOption"
23+
automatic-dropdown
24+
top-create
25+
ref="selectDom"
26+
>
27+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
28+
</tiny-select>
29+
<tiny-dialog-box :visible="boxVisibility" @update:visible="boxVisibility = $event" title="新建" width="30%">
30+
<div>
31+
<div>
32+
<span>label</span>
33+
<br />
34+
<br />
35+
<tiny-input v-model="optionLabel"></tiny-input>
36+
</div>
37+
<br />
38+
<div>
39+
<span>value</span>
40+
<br />
41+
<br />
42+
<tiny-input v-model="optionValue"></tiny-input>
43+
</div>
44+
</div>
45+
<template #footer>
46+
<tiny-button @click="boxVisibility = false">取消</tiny-button>
47+
<tiny-button type="primary" @click="handleConfirm"> 确定 </tiny-button>
48+
</template>
49+
</tiny-dialog-box>
50+
</div>
51+
</template>
52+
53+
<script setup>
54+
import { ref } from 'vue'
55+
import {
56+
TinySelectWrapper as TinySelect,
57+
TinyOption,
58+
TinyInput,
59+
TinyButton,
60+
TinyDialogBox,
61+
TinyModal
62+
} from '@opentiny/vue'
63+
64+
const options = ref([
65+
{ value: '选项 1', label: '北京' },
66+
{ value: '选项 2', label: '上海' },
67+
{ value: '选项 3', label: '天津' },
68+
{ value: '选项 4', label: '重庆' },
69+
{ value: '选项 5', label: '深圳' }
70+
])
71+
72+
const selectDom = ref(null)
73+
const value = ref('')
74+
const boxVisibility = ref(false)
75+
const optionLabel = ref('')
76+
const optionValue = ref('')
77+
78+
const handleAddOption = () => {
79+
optionValue.value = ''
80+
optionLabel.value = ''
81+
boxVisibility.value = true
82+
}
83+
84+
const handleConfirm = () => {
85+
if (!optionLabel.value || !optionValue.value) {
86+
TinyModal.message({ message: '选项不能为空！', status: 'warning' })
87+
return
88+
}
89+
boxVisibility.value = false
90+
options.value.unshift({
91+
value: optionValue,
92+
label: optionLabel
93+
})
94+
selectDom.value.focus()
95+
}
96+
</script>
97+
98+
<style lang="less" scoped>
99+
.tiny-select {
100+
width: 280px;
101+
}
102+
</style>

‎examples/sites/demos/pc/app/select-wrapper/allow-create.spec.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { test, expect } from '@playwright/test'
2+
3+
test('点击选中', async ({ page }) => {
4+
page.on('pageerror', (exception) => expect(exception).toBeNull())
5+
await page.waitForTimeout(300)
6+
await page.goto('select#allow-create')
7+
8+
const wrap = page.locator('#allow-create')
9+
const select = wrap.locator('.tiny-select').nth(0)
10+
const dropdown = page.locator('body > .tiny-select-dropdown')
11+
const input = select.locator('.tiny-input__inner')
12+
13+
await input.click()
14+
await input.fill('测试 allow-create')
15+
const KeyboardEvent = await page.evaluateHandle(() => new KeyboardEvent('keyup'))
16+
await input.dispatchEvent('keyup', { KeyboardEvent })
17+
18+
await expect(input).toHaveValue('测试 allow-create')
19+
await dropdown.getByRole('listitem').filter({ hasText: '测试 allow-create' }).click()
20+
await expect(input).toHaveValue('测试 allow-create')
21+
22+
await input.click()
23+
await expect(input).toHaveValue('')
24+
await expect(dropdown.getByRole('listitem').filter({ hasText: '测试 allow-create' })).toHaveClass(/selected/)
25+
})
26+
27+
test('enter 选中', async ({ page }) => {
28+
page.on('pageerror', (exception) => expect(exception).toBeNull())
29+
await page.waitForTimeout(300)
30+
await page.goto('select#allow-create')
31+
32+
const wrap = page.locator('#allow-create')
33+
const select = wrap.locator('.tiny-select').nth(1)
34+
const dropdown = page.locator('body > .tiny-select-dropdown')
35+
const input = select.locator('.tiny-input__inner')
36+
37+
await input.click()
38+
await input.press('a')
39+
await input.press('b')
40+
await page.waitForTimeout(300)
41+
await input.press('Enter')
42+
43+
await expect(dropdown).toBeHidden()
44+
await expect(input).toHaveValue('ab')
45+
46+
await input.click()
47+
48+
await expect(input).toHaveValue('')
49+
await expect(dropdown.getByRole('listitem').filter({ hasText: 'ab' })).toHaveClass(/selected/)
50+
})

‎examples/sites/demos/pc/app/select-wrapper/allow-create.vue‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<div>
3+
<div>场景 1：allow-create + filterable，点击创建条目</div>
4+
<br />
5+
<tiny-select v-model="value" allow-create filterable>
6+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
7+
</tiny-select>
8+
<br />
9+
<br />
10+
<div>场景 2：allow-create + filterable + default-first-option，Enter 键创建条目</div>
11+
<br />
12+
<tiny-select v-model="value" allow-create filterable default-first-option>
13+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
14+
</tiny-select>
15+
<br />
16+
<br />
17+
<div>场景 3：下拉框显示新增按钮</div>
18+
<br />
19+
<tiny-select
20+
v-model="value"
21+
placeholder="请选择"
22+
@top-create-click="handleAddOption"
23+
automatic-dropdown
24+
top-create
25+
ref="selectDom"
26+
>
27+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
28+
</tiny-select>
29+
<tiny-dialog-box :visible="boxVisibility" @update:visible="boxVisibility = $event" title="新建" width="30%">
30+
<div>
31+
<div>
32+
<span>label</span>
33+
<br />
34+
<br />
35+
<tiny-input v-model="optionLabel"></tiny-input>
36+
</div>
37+
<br />
38+
<div>
39+
<span>value</span>
40+
<br />
41+
<br />
42+
<tiny-input v-model="optionValue"></tiny-input>
43+
</div>
44+
</div>
45+
<template #footer>
46+
<tiny-button @click="boxVisibility = false">取消</tiny-button>
47+
<tiny-button type="primary" @click="handleConfirm"> 确定 </tiny-button>
48+
</template>
49+
</tiny-dialog-box>
50+
</div>
51+
</template>
52+
53+
<script>
54+
import { TinySelect, TinyOption, TinyInput, TinyButton, TinyDialogBox, TinyModal } from '@opentiny/vue'
55+
56+
export default {
57+
components: {
58+
TinySelect,
59+
TinyOption,
60+
TinyInput,
61+
TinyButton,
62+
TinyDialogBox
63+
},
64+
data() {
65+
return {
66+
options: [
67+
{ value: '选项 1', label: '北京' },
68+
{ value: '选项 2', label: '上海' },
69+
{ value: '选项 3', label: '天津' },
70+
{ value: '选项 4', label: '重庆' },
71+
{ value: '选项 5', label: '深圳' }
72+
],
73+
value: '',
74+
boxVisibility: false,
75+
optionLabel: '',
76+
optionValue: ''
77+
}
78+
},
79+
methods: {
80+
handleAddOption() {
81+
this.optionValue = ''
82+
this.optionLabel = ''
83+
this.boxVisibility = true
84+
},
85+
handleConfirm() {
86+
if (!this.optionLabel || !this.optionValue) {
87+
TinyModal.message({ message: '选项不能为空！', status: 'warning' })
88+
return
89+
}
90+
this.boxVisibility = false
91+
this.options.unshift({
92+
value: this.optionValue,
93+
label: this.optionLabel
94+
})
95+
this.$refs.selectDom.focus()
96+
}
97+
}
98+
}
99+
</script>
100+
101+
<style lang="less" scoped>
102+
.tiny-select {
103+
width: 280px;
104+
}
105+
</style>

0 commit comments

Comments
 (0)