Skip to content

Commit a2f29f2

Browse files
discreted66discreted66
authored
feat:多端tree-select以及示例开发 (#3877)
1 parent cb328fe commit a2f29f2

File tree

25 files changed

+1316
-34
lines changed

25 files changed

+1316
-34
lines changed

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<tiny-tree-select v-model="value" :tree-op="treeOp"></tiny-tree-select>
3+
</template>
4+
5+
<script>
6+
import { TinyTreeSelect } from '@opentiny/vue'
7+
8+
export default {
9+
components: {
10+
TinyTreeSelect
11+
},
12+
data() {
13+
return {
14+
value: 10,
15+
treeOp: {
16+
data: [
17+
{
18+
value: 1,
19+
label: '一级 1',
20+
children: [
21+
{
22+
value: 4,
23+
label: '二级 1-1',
24+
children: [
25+
{
26+
value: 9,
27+
label: '三级 1-1-1'
28+
},
29+
{
30+
value: 10,
31+
label: '三级 1-1-2'
32+
}
33+
]
34+
}
35+
]
36+
},
37+
{
38+
value: 2,
39+
label: '一级 2',
40+
children: [
41+
{
42+
value: 5,
43+
label: '二级 2-1'
44+
},
45+
{
46+
value: 6,
47+
label: '二级 2-2'
48+
}
49+
]
50+
}
51+
]
52+
}
53+
}
54+
}
55+
}
56+
</script>
57+
58+
<style scoped>
59+
[data-tag='tiny-base-select'],
60+
[data-tag='tiny-tree-select'] {
61+
width: 280px;
62+
}
63+
</style>

‎examples/sites/demos/mobile-first/app/tree-select/collapse-tags.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div>
3+
<p>场景 1：collapse-tags 折叠</p>
4+
<br />
5+
<tiny-tree-select v-model="value" :tree-op="treeOp" multiple collapse-tags></tiny-tree-select>
6+
<br />
7+
<br />
8+
<p>场景 2：hover-expand 折叠</p>
9+
<br />
10+
<tiny-tree-select v-model="value" :tree-op="treeOp" multiple hover-expand></tiny-tree-select>
11+
<br />
12+
<br />
13+
<p>场景 3：click-expand 折叠</p>
14+
<br />
15+
<tiny-tree-select v-model="value" :tree-op="treeOp" multiple click-expand></tiny-tree-select>
16+
</div>
17+
</template>
18+
19+
<script>
20+
import { TinyTreeSelect } from '@opentiny/vue'
21+
22+
export default {
23+
components: {
24+
TinyTreeSelect
25+
},
26+
data() {
27+
return {
28+
value: [9, 6],
29+
treeOp: {
30+
data: [
31+
{
32+
value: 1,
33+
label: '一级 1',
34+
children: [
35+
{
36+
value: 4,
37+
label: '二级 1-1',
38+
children: [
39+
{
40+
value: 9,
41+
label: '三级 1-1-1'
42+
},
43+
{
44+
value: 10,
45+
label: '三级 1-1-2'
46+
}
47+
]
48+
}
49+
]
50+
},
51+
{
52+
value: 2,
53+
label: '一级 2',
54+
children: [
55+
{
56+
value: 5,
57+
label: '二级 2-1'
58+
},
59+
{
60+
value: 6,
61+
label: 'OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库'
62+
}
63+
]
64+
}
65+
]
66+
}
67+
}
68+
}
69+
}
70+
</script>
71+
72+
<style scoped>
73+
[data-tag='tiny-base-select'],
74+
[data-tag='tiny-tree-select'] {
75+
width: 280px;
76+
}
77+
</style>

‎examples/sites/demos/mobile-first/app/tree-select/copy.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div>
3+
<p>场景 1：一键复制所有标签</p>
4+
<tiny-tree-select v-model="value" :tree-op="treeOp" multiple copyable></tiny-tree-select>
5+
<br />
6+
<br />
7+
<p>场景 2：设置复制文本分隔符</p>
8+
<tiny-tree-select v-model="value" :tree-op="treeOp" multiple copyable text-split="/"></tiny-tree-select>
9+
<br />
10+
<br />
11+
<p>粘贴至此处：</p>
12+
<tiny-input v-model="inputVal" class="copy-value" type="text"></tiny-input>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import { TinyTreeSelect, TinyInput } from '@opentiny/vue'
18+
19+
export default {
20+
components: {
21+
TinyTreeSelect,
22+
TinyInput
23+
},
24+
data() {
25+
return {
26+
value: [9, 6],
27+
inputVal: '',
28+
treeOp: {
29+
data: [
30+
{
31+
value: 1,
32+
label: '一级 1',
33+
children: [
34+
{
35+
value: 4,
36+
label: '二级 1-1',
37+
children: [
38+
{
39+
value: 9,
40+
label: '三级 1-1-1'
41+
},
42+
{
43+
value: 10,
44+
label: '三级 1-1-2'
45+
}
46+
]
47+
}
48+
]
49+
},
50+
{
51+
value: 2,
52+
label: '一级 2',
53+
children: [
54+
{
55+
value: 5,
56+
label: '二级 2-1'
57+
},
58+
{
59+
value: 6,
60+
label: '二级 2-2'
61+
}
62+
]
63+
}
64+
]
65+
}
66+
}
67+
}
68+
}
69+
</script>
70+
71+
<style scoped>
72+
[data-tag='tiny-base-select'],
73+
[data-tag='tiny-tree-select'],
74+
.tiny-input {
75+
width: 280px;
76+
}
77+
</style>

‎examples/sites/demos/mobile-first/app/tree-select/disabled.vue‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<div>
3+
<p>场景 1：未选择</p>
4+
<tiny-tree-select v-model="value1" :tree-op="treeOp" disabled></tiny-tree-select>
5+
<br />
6+
<br />
7+
<p>场景 2：单选</p>
8+
<tiny-tree-select v-model="value2" :tree-op="treeOp" disabled></tiny-tree-select>
9+
<br />
10+
<br />
11+
<p>场景 3：多选</p>
12+
<tiny-tree-select v-model="value3" :tree-op="treeOp" multiple disabled></tiny-tree-select>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import { TinyTreeSelect } from '@opentiny/vue'
18+
19+
export default {
20+
components: {
21+
TinyTreeSelect
22+
},
23+
data() {
24+
return {
25+
value1: '',
26+
value2: 1,
27+
value3: [9, 6],
28+
treeOp: {
29+
data: [
30+
{
31+
value: 1,
32+
label: '一级 1',
33+
children: [
34+
{
35+
value: 4,
36+
label: '二级 1-1',
37+
children: [
38+
{
39+
value: 9,
40+
label: '三级 1-1-1'
41+
},
42+
{
43+
value: 10,
44+
label: '三级 1-1-2'
45+
}
46+
]
47+
}
48+
]
49+
},
50+
{
51+
value: 2,
52+
label: '一级 2',
53+
children: [
54+
{
55+
value: 5,
56+
label: '二级 2-1'
57+
},
58+
{
59+
value: 6,
60+
label: '二级 2-2'
61+
}
62+
]
63+
}
64+
]
65+
}
66+
}
67+
}
68+
}
69+
</script>
70+
71+
<style scoped>
72+
[data-tag='tiny-base-select'],
73+
[data-tag='tiny-tree-select'] {
74+
width: 280px;
75+
}
76+
</style>

‎examples/sites/demos/mobile-first/app/tree-select/map-field.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<tiny-tree-select v-model="value" :tree-op="treeOp" value-field="val" text-field="text"></tiny-tree-select>
3+
</template>
4+
5+
<script>
6+
import { TinyTreeSelect } from '@opentiny/vue'
7+
8+
export default {
9+
components: {
10+
TinyTreeSelect
11+
},
12+
data() {
13+
return {
14+
value: '',
15+
treeOp: {
16+
data: [
17+
{
18+
val: 1,
19+
text: '一级 1',
20+
children: [
21+
{
22+
val: 4,
23+
text: '二级 1-1',
24+
children: [
25+
{
26+
val: 9,
27+
text: '三级 1-1-1'
28+
},
29+
{
30+
val: 10,
31+
text: '三级 1-1-2'
32+
}
33+
]
34+
}
35+
]
36+
},
37+
{
38+
val: 2,
39+
text: '一级 2',
40+
children: [
41+
{
42+
val: 5,
43+
text: '二级 2-1'
44+
},
45+
{
46+
val: 6,
47+
text: '二级 2-2'
48+
}
49+
]
50+
}
51+
]
52+
}
53+
}
54+
}
55+
}
56+
</script>
57+
58+
<style scoped>
59+
[data-tag='tiny-base-select'],
60+
[data-tag='tiny-tree-select'] {
61+
width: 280px;
62+
}
63+
</style>

0 commit comments

Comments
 (0)