# 8.6 标签组（Tag Group）
用于标记选择
# 实例
# 基础用法
<template>
<div class="page">
<scroller class="content">
<dof-board title="示例">
<dof-card class="mb-10">
<div class="caption">
<text class="caption-title">挡位</text>
<text class="caption-desc">{{ tv }}</text>
</div>
<dof-tag-group v-model="tv">
<dof-row>
<dof-col>
<dof-tag :value="0">低</dof-tag>
</dof-col>
<dof-col>
<dof-tag :value="1">中</dof-tag>
</dof-col>
<dof-col>
<dof-tag :value="2">高</dof-tag>
</dof-col>
</dof-row>
</dof-tag-group>
</dof-card>
<dof-card>
<div class="caption">
<text class="caption-title">挡位</text>
<text class="caption-desc">{{ tv1 + 1 }}档</text>
</div>
<dof-tag-group v-model="tv1">
<dof-row>
<dof-col>
<dof-tag :value="0">30°</dof-tag>
</dof-col>
<dof-col>
<dof-tag :value="1">60°</dof-tag>
</dof-col>
<dof-col>
<dof-tag :value="2">90°</dof-tag>
</dof-col>
<dof-col>
<dof-tag :value="3">120°</dof-tag>
</dof-col>
</dof-row>
</dof-tag-group>
</dof-card>
</dof-board>
</scroller>
</div>
</template>
<script>
import { DofBoard, DofTagGroup, DofTag, DofCard, DofRow, DofCol } from 'dolphin-intl-ui'
export default {
components: {
DofBoard,
DofTagGroup,
DofTag,
DofCard,
DofRow,
DofCol
},
data() {
return {
tv: 0,
tv1: 0
}
}
}
</script>
<style scoped>
.page {
padding-top: 20px;
background-color: #f9f9f9;
}
.safe {
padding-top: 64px;
}
.scroller {
flex: 1;
}
.mb-10 {
margin-bottom: 10px;
}
.m-16 {
margin-left: 16px;
margin-right: 16px;
margin-bottom: 16px;
}
.caption {
flex-direction: row;
padding-left: 16px;
padding-right: 16px;
padding-top: 8px;
padding-bottom: 20px;
}
.caption-title {
font-family: PingFangSC-Medium;
font-size: 16px;
color: #333333;
font-weight: 500;
padding-right: 8px;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #f2f2f2;
}
.caption-desc {
padding-left: 8px;
font-family: PingFangSC-Medium;
font-size: 16px;
color: #333333;
font-weight: 500;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
# Api
# TagGroup
# Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| value | String | Number | Y | - | 选中的值，支持 v-model |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
change | Tag 后代被点击时触发 | String | Number |
# Slots
| 插槽名 | 说明 |
|---|---|
| default | 标记组内容 |
# Tag
# Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| value | String | Number | N | "" | 标签值；在 dof-tag-group 内应保持唯一 |
| active | Boolean | N | false | 是否激活，支持 v-model |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
change | 点击时触发 | Boolean |
# Slots
| 插槽名 | 说明 |
|---|---|
| default | 标记文本；Tag Group 通过子组件层级索引产生选中值，value 应与子 Tag 的顺序对应 |