Skip to content

Commit dba45e3

Browse files
discreted66discreted66
authored
feat:多端base-select以及grid-select文档 (#3872)
1 parent 7fee047 commit dba45e3

Some content is hidden

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

56 files changed

+4095
-16
lines changed

‎examples/docs/newsrc/utils/componentsDoc.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
export const apis = import.meta.glob('../../../sites/demos/apis/*.js', { eager: false })
22

33
export const getPath = (path) => {
4-
if (path.startsWith('grid-')) {
4+
if (path === 'grid-select') {
5+
return 'grid-select'
6+
} else if (path.startsWith('grid-')) {
57
return 'grid'
68
} else if (path.startsWith('chart-')) {
79
return 'chart'
10+
} else {
11+
return path
812
}
9-
return path
1013
}
1114

1215
export const getApisConfig = async (component, mode) => {

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default {
2-
mode: ['pc'],
2+
mode: ['pc', 'mobile-first'],
33
apis: [
44
{
55
name: 'grid-select',
@@ -13,7 +13,7 @@ export default {
1313
'zh-CN': '是否启用一键清除的功能',
1414
'en-US': 'Whether to display the one click clear button, only applicable to radio selection'
1515
},
16-
mode: ['pc'],
16+
mode: ['pc', 'mobile-first'],
1717
pcDemo: 'basic-usage'
1818
},
1919
{
@@ -24,7 +24,7 @@ export default {
2424
'zh-CN': '是否可搜索',
2525
'en-US': 'Is it searchable'
2626
},
27-
mode: ['pc'],
27+
mode: ['pc', 'mobile-first'],
2828
pcDemo: 'remote'
2929
},
3030
{
@@ -35,7 +35,7 @@ export default {
3535
'zh-CN': '自定义过滤方法',
3636
'en-US': 'Custom filtering method'
3737
},
38-
mode: ['pc'],
38+
mode: ['pc', 'mobile-first'],
3939
pcDemo: 'remote'
4040
},
4141
{
@@ -47,7 +47,7 @@ export default {
4747
'zh-CN': '下拉表格时，内置表格组件的配置，用法同 Grid 组件。',
4848
'en-US': ''
4949
},
50-
mode: ['pc'],
50+
mode: ['pc', 'mobile-first'],
5151
pcDemo: 'basic-usage'
5252
},
5353
{
@@ -69,7 +69,7 @@ export default {
6969
'zh-CN': '是否允许选择多个选项',
7070
'en-US': 'Allow multiple options to be selected'
7171
},
72-
mode: ['pc'],
72+
mode: ['pc', 'mobile-first'],
7373
pcDemo: 'remote'
7474
},
7575
{
@@ -81,7 +81,7 @@ export default {
8181
'zh-CN': '单选配置项',
8282
'en-US': 'Radio config'
8383
},
84-
mode: ['pc'],
84+
mode: ['pc', 'mobile-first'],
8585
pcDemo: 'config'
8686
},
8787
{
@@ -92,7 +92,7 @@ export default {
9292
'zh-CN': '是否为远程搜索',
9393
'en-US': 'Is it a remote search'
9494
},
95-
mode: ['pc'],
95+
mode: ['pc', 'mobile-first'],
9696
pcDemo: 'remote'
9797
},
9898
{
@@ -103,7 +103,7 @@ export default {
103103
'zh-CN': '远程搜索的方法',
104104
'en-US': 'Remote search methods'
105105
},
106-
mode: ['pc'],
106+
mode: ['pc', 'mobile-first'],
107107
pcDemo: 'remote'
108108
},
109109
{
@@ -115,7 +115,7 @@ export default {
115115
'en-US':
116116
'When selecting multiple searchable options, do you still keep the current search keywords after selecting one option'
117117
},
118-
mode: ['pc'],
118+
mode: ['pc', 'mobile-first'],
119119
pcDemo: 'remote'
120120
},
121121
{
@@ -127,7 +127,7 @@ export default {
127127
'zh-CN': '多选配置项',
128128
'en-US': 'Select config'
129129
},
130-
mode: ['pc'],
130+
mode: ['pc', 'mobile-first'],
131131
pcDemo: 'config'
132132
},
133133
{
@@ -138,7 +138,7 @@ export default {
138138
'zh-CN': '显示值字段',
139139
'en-US': 'Show Value Fields'
140140
},
141-
mode: ['pc'],
141+
mode: ['pc', 'mobile-first'],
142142
pcDemo: 'basic-usage'
143143
},
144144
{
@@ -149,7 +149,7 @@ export default {
149149
'zh-CN': '绑定值字段',
150150
'en-US': 'Bind Value Field'
151151
},
152-
mode: ['pc'],
152+
mode: ['pc', 'mobile-first'],
153153
pcDemo: 'basic-usage'
154154
}
155155
]

‎examples/sites/demos/mobile-first/app/base-select/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-base-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-base-select>
7+
8+
<div style="margin: 16px 0">全选后，显示自定义的全部 Tag</div>
9+
<tiny-base-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-base-select>
12+
</div>
13+
</template>
14+
15+
<script>
16+
import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
17+
18+
export default {
19+
components: {
20+
TinyBaseSelect,
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+
[data-tag='tiny-base-select'] {
41+
width: 280px;
42+
}
43+
</style>

‎examples/sites/demos/mobile-first/app/base-select/allow-create.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<div>
3+
<div>场景 1：allow-create + filterable，点击创建条目</div>
4+
<br />
5+
<tiny-base-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-base-select>
8+
<br />
9+
<br />
10+
<div>场景 2：allow-create + filterable + default-first-option，Enter 键创建条目</div>
11+
<br />
12+
<tiny-base-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-base-select>
15+
</div>
16+
</template>
17+
18+
<script>
19+
import { TinyBaseSelect, TinyOption, TinyInput, TinyButton, TinyDialogBox, TinyModal } from '@opentiny/vue'
20+
21+
export default {
22+
components: {
23+
TinyBaseSelect,
24+
TinyOption,
25+
TinyInput,
26+
TinyButton,
27+
TinyDialogBox
28+
},
29+
data() {
30+
return {
31+
options: [
32+
{ value: '选项 1', label: '北京' },
33+
{ value: '选项 2', label: '上海' },
34+
{ value: '选项 3', label: '天津' },
35+
{ value: '选项 4', label: '重庆' },
36+
{ value: '选项 5', label: '深圳' }
37+
],
38+
value: '',
39+
boxVisibility: false,
40+
optionLabel: '',
41+
optionValue: ''
42+
}
43+
}
44+
}
45+
</script>
46+
47+
<style lang="less" scoped>
48+
[data-tag='tiny-base-select'] {
49+
width: 280px;
50+
}
51+
</style>

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

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

‎examples/sites/demos/mobile-first/app/base-select/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-base-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-base-select>
11+
<br />
12+
<br />
13+
<div>场景 2：配置式</div>
14+
<br />
15+
<tiny-base-select v-model="value" :options="options"> </tiny-base-select>
16+
</div>
17+
</template>
18+
19+
<script>
20+
import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
21+
import { iconFile } from '@opentiny/vue-icon'
22+
23+
export default {
24+
components: {
25+
TinyBaseSelect,
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+
[data-tag='tiny-base-select'] {
45+
width: 280px;
46+
}
47+
</style>

‎examples/sites/demos/mobile-first/app/base-select/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-base-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-base-select>
6+
<p class="value">
7+
{{ value }}
8+
</p>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
14+
15+
export default {
16+
components: {
17+
TinyBaseSelect,
18+
TinyOption
19+
},
20+
data() {
21+
return {
22+
options: [
23+
{ obj: { val: '选项 1', id: 1 }, text: '北京' },
24+
{ obj: { val: '选项 2', id: 2 }, text: '上海' },
25+
{ obj: { val: '选项 3', id: 3 }, text: '天津' },
26+
{ obj: { val: '选项 4', id: 4 }, text: '重庆' },
27+
{ obj: { val: '选项 5', id: 5 }, text: '深圳' }
28+
],
29+
value: { val: '选项 3', id: 3 }
30+
}
31+
}
32+
}
33+
</script>
34+
35+
<style lang="less" scoped>
36+
[data-tag='tiny-base-select'] {
37+
width: 280px;
38+
}
39+
p {
40+
font-size: 14px;
41+
line-height: 1.5;
42+
padding: 16px 0;
43+
}
44+
</style>

0 commit comments

Comments
 (0)