# 3.3 菱形标签 （Diamond tab）
菱形标签栏，用于让用户在不同的视图中进行切换。
# 组件设计
1、标签数量：标签栏支持2、3、4、5个标签项
2、标签文字：2、3个标签时，最多4个字。4、5个标签时，最多2个字。超出的文字，进行截取，截取后在最后一位用省略号占位。（不建议超出）
3、交互：当前选中的标签，边框附加颜色，标签文本高亮；点击任意标签（未松开手指）时，该标签背景色变为点击态对应的颜色
# 应用示例
# 实例
# 基础用法
<template>
<div class="box">
<dof-minibar title="dof-diamond-tab"> </dof-minibar>
<div class="showItem">
<dof-diamond-tab
:tabData="tabData"
:active="active"
:textColor="textColor"
:activeTextColor="activeTextColor"
:textFontSize="textFontSize"
:bgColor="bgColor"
:borderColor="borderColor"
:activeBorderColor="activeBorderColor"
:touchColor="touchColor"
@tabActiveChange="tabActiveChange"
/>
<dof-diamond-tab
:tabData="tabData2"
:active="active2"
:textColor="textColor"
:activeTextColor="activeTextColor"
:textFontSize="textFontSize"
:bgColor="bgColor"
:borderColor="borderColor"
:activeBorderColor="activeBorderColor"
:touchColor="touchColor"
style="margin-top: 60px"
/>
<dof-diamond-tab
:tabData="tabData3"
:active="active3"
:textColor="textColor"
:activeTextColor="activeTextColor"
:textFontSize="'30px'"
:bgColor="bgColor"
:borderColor="borderColor"
:activeBorderColor="activeBorderColor"
:touchColor="touchColor"
:itemHeight="80"
style="margin-top: 60px"
/>
</div>
</div>
</template>
<script>
import { DofMinibar, DofDiamondTab } from 'dolphin-weex-ui'
module.exports = {
components: {
DofMinibar,
DofDiamondTab
},
data: () => ({
tabData: [{ label: '上桶' }, { label: '下桶' }],
tabData2: [{ label: '上下风' }, { label: '左右风' }, { label: '无风感' }],
tabData3: [{ label: '1档' }, { label: '2档' }, { label: '3档' }, { label: '4档' }],
active: 0,
active2: 1,
active3: 2,
bgColor: '#000', // 背景颜色
borderColor: 'rgba(61, 61, 66, 1)', //常规边框颜色
activeBorderColor: '#b35336', // 选中态边框颜色
touchColor: '#1A1A1C', // 点击未松开背景颜色
textColor: '#71717A', // 字体颜色
activeTextColor: '#ffffff', // 选中态字体颜色
textFontSize: '24px' // 字体大小
}),
mounted() {},
methods: {
tabActiveChange(i) {
// this.$toast(i)
}
}
}
</script>
<style scoped>
.box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
}
.showItem {
background-color: #000;
/* width: 600px; */
padding-top: 30px;
padding-bottom: 30px;
}
</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
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
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| tabData | Array | Y | [] | 标签数据，label字段为显示文案 |
| active | Number | N | null | 标签初始选中项 |
| bgColor | String | N | #000 | 背景颜色 |
| borderColor | String | N | rgba(61, 61, 66, 1) | 边框颜色 |
| activeBorderColor | String | N | #b35336 | 选中态边框颜色 |
| touchColor | String | N | #1A1A1C | 点击未松开背景颜色 |
| textColor | String | N | #71717A | 字体颜色 |
| activeTextColor | String | N | #FFFFFF | 选中态字体颜色 |
| textFontSize | String | N | 24px | 字体大小 |
| itemHeight | Number | N | 64 | 标签高度 |
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| label | String | N | `` | 标签显示内容 |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
tabActiveChange | 选中态改变事件， 返回参数为：当前选中项index | index |