# 纵向选项卡 vtabs
# 描述
纵向的标签页切换。
# 使用效果
# 使用方法
在.ux文件中引入组件
<import name="q-tabs" src="qaui/src/components/vtabs/index"></import>
<import name="q-tabbar" src="qaui/src/components/tabbar/index"></import>
1
2
2
# 示例
<template>
<div class="qaui-wrap">
<q-tabbar
index="{{ index }}"
background="{{ background }}"
text-color="{{ textColor }}"
active-color="{{ activeColor }}"
data="{{ tabbarData }}"
icon-size="{{ iconSize }}"
ontap="changeTabbar"
>
<div class="item-container">
<div class="item-content">
<q-tabs
type="default"
data="{{ data }}"
active-color="#456fff"
ontap="changeTap"
>
<block for="{{ data }}">
<div class="item-container">
<div class="item-content">
<text>标签{{ $idx + 1 }}内容</text>
</div>
</div>
</block>
</q-tabs>
</div>
</div>
<div class="item-container">
<div class="item-content">
<q-tabs
type="capsule"
data="{{ data }}"
active-color="#456FFF"
ontap="changeTap"
>
<block for="{{ data }}">
<div class="item-container">
<div class="item-content">
<text>标签{{ $idx + 1 }}内容</text>
</div>
</div>
</block>
</q-tabs>
</div>
</div>
<div class="item-container">
<div class="item-content">
<q-tabs
type="icon-label"
data="{{ data }}"
active-color="#456fff"
ontap="changeTap"
>
<block for="{{ data }}">
<div class="item-container">
<div class="item-content">
<text>标签{{ $idx + 1 }}内容</text>
</div>
</div>
</block>
</q-tabs>
</div>
</div>
</q-tabbar>
</div>
</template>
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
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
<script>
export default {
data() {
return {
data: [
{ label: '标签文字', icon: 'qrcode-fill' },
{ label: '标签文字', icon: 'send' },
{ label: '标签文字', icon: 'call-forwarding' },
{ label: '标签文字', icon: 'restore-call-records' },
{ label: '标签文字', icon: 'restore-call-records' },
{ label: '标签文字', icon: 'restore-call-records' },
{ label: '标签文字', icon: 'restore-call-records' },
{ label: '标签文字', icon: 'restore-call-records' },
{ label: '标签文字', icon: 'restore-call-records' },
{ label: '标签文字', icon: 'restore-call-records' },
{ label: '标签文字', icon: 'restore-call-records' },
{ label: '标签文字', icon: 'restore-call-records' },
],
tabbarData: [
{
icon: 'homepage',
iconPath: '../../common/images/tabIcon.svg',
selectedIconPath: '../../common/images/tabSelectIcon.svg',
text: '普通标签',
},
{
icon: 'qrcode',
iconPath: '../../common/images/tabIcon.svg',
selectedIconPath: '../../common/images/tabSelectIcon.svg',
text: '胶囊标签',
},
{
icon: 'contact-fill',
iconPath: '../../common/images/tabIcon.svg',
selectedIconPath: '../../common/images/tabSelectIcon.svg',
text: '描述标签',
},
],
iconSize: 22,
background: '#fff',
activeColor: '#456FFF',
textColor: '#B2B2B2',
}
},
changeTabbar(evt) {
console.log('changeTabbar',evt.detail)
},
changeTap(evt) {
console.log('changeTap',evt.detail)
}
}
</script>
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
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
<style lang="less">
.qaui-wrap {
flex-direction: row;
}
</style>
1
2
3
4
5
2
3
4
5
# API
# 组件属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | String | 'default' | 标签类型,必填. 可选值有：'default'|'capsule'|'icon-label' |
| activeColor | String | '#456fff' | 激活时标签颜色 |
| data | Array | [ ] | data 数据对象数组，对象数据结构见下表 |
data 内对象的属性说明
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label | String | '' | 标签文字，必填 |
| icon | String | '' | icon 名称，仅当 type 为icon-label有效，必填 |
# 组件事件
| 事件名称 | 事件描述 | 返回值 |
|---|---|---|
| tap | 切换标签时触发 | {detail：{index: 当前点击项的索引}} |