Skip to content

Commit 5ab0209

Browse files
discreted66discreted66
authored
feat:select-wrapper多端示例以及文档 (#3882)
1 parent d9b4abb commit 5ab0209

Some content is hidden

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

49 files changed

+4320
-0
lines changed

‎examples/sites/demos/mobile-first/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 { TinySelectWrapper as 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/mobile-first/app/select-wrapper/allow-create.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
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+
</div>
16+
</template>
17+
18+
<script>
19+
import {
20+
TinySelectWrapper as TinySelect,
21+
TinyOption,
22+
TinyInput,
23+
TinyButton,
24+
TinyDialogBox,
25+
TinyModal
26+
} from '@opentiny/vue'
27+
28+
export default {
29+
components: {
30+
TinySelect,
31+
TinyOption,
32+
TinyInput,
33+
TinyButton,
34+
TinyDialogBox
35+
},
36+
data() {
37+
return {
38+
options: [
39+
{ value: '选项 1', label: '北京' },
40+
{ value: '选项 2', label: '上海' },
41+
{ value: '选项 3', label: '天津' },
42+
{ value: '选项 4', label: '重庆' },
43+
{ value: '选项 5', label: '深圳' }
44+
],
45+
value: '',
46+
boxVisibility: false,
47+
optionLabel: '',
48+
optionValue: ''
49+
}
50+
},
51+
methods: {
52+
handleAddOption() {
53+
this.optionValue = ''
54+
this.optionLabel = ''
55+
this.boxVisibility = true
56+
},
57+
handleConfirm() {
58+
if (!this.optionLabel || !this.optionValue) {
59+
TinyModal.message({ message: '选项不能为空！', status: 'warning' })
60+
return
61+
}
62+
this.boxVisibility = false
63+
this.options.unshift({
64+
value: this.optionValue,
65+
label: this.optionLabel
66+
})
67+
this.$refs.selectDom.focus()
68+
}
69+
}
70+
}
71+
</script>
72+
73+
<style lang="less" scoped>
74+
.tiny-select {
75+
width: 280px;
76+
}
77+
</style>

‎examples/sites/demos/mobile-first/app/select-wrapper/automatic-dropdown.vue‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<div>
3+
<p>场景 1：默认不可搜索时，获取焦点不下拉</p>
4+
<br />
5+
<tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
6+
<tiny-select v-model="value" ref="selectOnlyFocusRef">
7+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
8+
</tiny-select>
9+
<br /><br />
10+
<p>场景 2：设置不可搜索时，获取焦点并自动下拉</p>
11+
<br />
12+
<tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
13+
<tiny-select v-model="value" ref="selectAutoDropRef" automatic-dropdown>
14+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
15+
</tiny-select>
16+
</div>
17+
</template>
18+
19+
<script>
20+
import { TinySelectWrapper as TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
21+
22+
export default {
23+
components: {
24+
TinySelect,
25+
TinyOption,
26+
TinyButton
27+
},
28+
data() {
29+
return {
30+
options: [
31+
{ value: '选项 1', label: '北京' },
32+
{ value: '选项 2', label: '上海' },
33+
{ value: '选项 3', label: '天津' },
34+
{ value: '选项 4', label: '重庆' },
35+
{ value: '选项 5', label: '深圳' }
36+
],
37+
value: ''
38+
}
39+
},
40+
methods: {
41+
handleFocus1() {
42+
this.$refs.selectOnlyFocusRef.focus()
43+
},
44+
handleFocus2() {
45+
this.$refs.selectAutoDropRef.focus()
46+
}
47+
}
48+
}
49+
</script>
50+
51+
<style lang="less" scoped>
52+
.tiny-select {
53+
width: 280px;
54+
}
55+
p {
56+
font-size: 14px;
57+
line-height: 1.5;
58+
}
59+
.tiny-button {
60+
margin-right: 10px;
61+
}
62+
</style>

‎examples/sites/demos/mobile-first/app/select-wrapper/basic-usage.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div>
3+
<div>选中的值为： {{ value }}</div>
4+
<br />
5+
<div>场景 1：标签式</div>
6+
<br />
7+
<tiny-select v-model="value">
8+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :icon="item.icon">
9+
</tiny-option>
10+
</tiny-select>
11+
<br />
12+
<br />
13+
<div>场景 2：配置式</div>
14+
<br />
15+
<tiny-select v-model="value" :options="options"> </tiny-select>
16+
</div>
17+
</template>
18+
19+
<script>
20+
import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
21+
import { iconFile } from '@opentiny/vue-icon'
22+
23+
export default {
24+
components: {
25+
TinySelect,
26+
TinyOption
27+
},
28+
data() {
29+
return {
30+
options: [
31+
{ value: '选项 1', label: '北京', icon: iconFile() },
32+
{ value: '选项 2', label: '上海', icon: iconFile() },
33+
{ value: '选项 3', label: '天津', icon: iconFile() },
34+
{ value: '选项 4', label: '重庆', icon: iconFile() },
35+
{ value: '选项 5', label: '深圳', icon: iconFile() }
36+
],
37+
value: ''
38+
}
39+
}
40+
}
41+
</script>
42+
43+
<style lang="less" scoped>
44+
.tiny-select {
45+
width: 280px;
46+
}
47+
</style>

‎examples/sites/demos/mobile-first/app/select-wrapper/binding-obj.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div>
3+
<tiny-select v-model="value" value-key="val">
4+
<tiny-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.obj"> </tiny-option>
5+
</tiny-select>
6+
<br /><br />
7+
<p class="value">
8+
{{ value }}
9+
</p>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
15+
16+
export default {
17+
components: {
18+
TinySelect,
19+
TinyOption
20+
},
21+
data() {
22+
return {
23+
options: [
24+
{ obj: { val: '选项 1', id: 1 }, text: '北京' },
25+
{ obj: { val: '选项 2', id: 2 }, text: '上海' },
26+
{ obj: { val: '选项 3', id: 3 }, text: '天津' },
27+
{ obj: { val: '选项 4', id: 4 }, text: '重庆' },
28+
{ obj: { val: '选项 5', id: 5 }, text: '深圳' }
29+
],
30+
value: { val: '选项 3', id: 3 }
31+
}
32+
}
33+
}
34+
</script>
35+
36+
<style lang="less" scoped>
37+
.tiny-select {
38+
width: 280px;
39+
}
40+
p {
41+
font-size: 14px;
42+
line-height: 1.5;
43+
}
44+
</style>

‎examples/sites/demos/mobile-first/app/select-wrapper/cache-usage.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div>
3+
<tiny-select v-model="value" clearable :options="options" :cache-op="cacheOp" @change="cacheChange"></tiny-select>
4+
<p class="cache-value">
5+
{{ cacheValue }}
6+
</p>
7+
</div>
8+
</template>
9+
10+
<script>
11+
import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
12+
13+
export default {
14+
components: {
15+
TinySelect
16+
},
17+
data() {
18+
return {
19+
cacheOp: {
20+
key: 'test'
21+
},
22+
cacheValue: '',
23+
options: [
24+
{ value: '选项 1', label: '北京' },
25+
{ value: '选项 2', label: '上海' },
26+
{ value: '选项 3', label: '天津' },
27+
{ value: '选项 4', label: '重庆' },
28+
{ value: '选项 5', label: '深圳' }
29+
],
30+
value: '选项 3'
31+
}
32+
},
33+
methods: {
34+
cacheChange() {
35+
this.cacheValue = window.localStorage.getItem(`tiny_memorize_${this.cacheOp.key}`)
36+
}
37+
}
38+
}
39+
</script>
40+
41+
<style lang="less" scoped>
42+
.tiny-select {
43+
width: 280px;
44+
}
45+
p {
46+
font-size: 14px;
47+
line-height: 1.5;
48+
}
49+
</style>

‎examples/sites/demos/mobile-first/app/select-wrapper/clear-no-match-value.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<div>
3+
<p>
4+
场景 1：单选，val 找不到匹配值，val 为： ,<span class="val">{{ val }}</span>
5+
</p>
6+
<br />
7+
<tiny-select v-model="val" :clear-no-match-value="true">
8+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
9+
</tiny-select>
10+
<br /><br />
11+
12+
<p>
13+
场景 2：多选，multiVal 找不到匹配值，multiVal 为：<span class="multi-val">{{ multiVal }}</span>
14+
</p>
15+
<br />
16+
<tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
17+
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
18+
</tiny-select>
19+
</div>
20+
</template>
21+
22+
<script>
23+
import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
24+
25+
export default {
26+
components: {
27+
TinySelect,
28+
TinyOption
29+
},
30+
data() {
31+
return {
32+
options: [
33+
{ value: '选项 1', label: '北京' },
34+
{ value: '选项 2', label: '上海' },
35+
{ value: '选项 3', label: '天津' },
36+
{ value: '选项 4', label: '重庆' },
37+
{ value: '选项 5', label: '深圳' }
38+
],
39+
val: '11',
40+
multiVal: ['选项 2', '11']
41+
}
42+
}
43+
}
44+
</script>
45+
46+
<style lang="less" scoped>
47+
.tiny-select {
48+
width: 280px;
49+
}
50+
p {
51+
font-size: 14px;
52+
line-height: 1.5;
53+
}
54+
</style>

0 commit comments

Comments
 (0)