//component/header-nav
<template>
<div class="tab-bar-nav">
<div class="tabs-tab" v-for="tab in tabList"
:class="[tabIndex==tab.index?'tabs-active':'']"
@click="changeTab(tab)"
>{{tab.name}}</div>
</div>
</template>
<script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
export default {
name: 'MyTabs',
props:
{
tabIndex: Number,
tabList: Array,
},
data() {
return {
};
},
methods: {
changeTab(tab) {
this.$emit('changeTab', tab);
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
/*激活状态*/
.is-active{
color:#d70d17;
}
</style>
1
2
3
4
5
6
2
3
4
5
6
- 在页面中引入
<template>
<header-nav :tabIndex="tabIndex" :tabList="tabList" @changeTab="changeTab"></header-nav>
</template>
1
2
3
2
3
<script>
import HeaderNav from '../../components/header-nav'
export default {
name: 'home',
components: { HeaderNav },
data () {
return {
tabIndex: 0,
tabList: [
{
index: 0,
name: '选项一',
},
{
index: 1,
name: '选项二',
},
],
}
},
methods: {
changeTab (tab) {
this.tabIndex = tab.index
}
}
}
</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
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