0%

vue elment-ui 对navTab导航组件封装

摘要:vue elment-ui 对navTab导航组件封装

图示

nav-tab1
nav-tab2

组件

代码

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
<template>
<div class="nav-tab-wrap">
<div class="nav-list">
<div
v-for="(item, index) in navList"
:key="item"
class="nav-item"
:class="{'active': currentTab === index}"
@click="handleCurrentTab(index)"
>{{ item }}</div>
<!-- 下拉菜单类型导航 -->
<el-dropdown
v-for="(item, index) in navDropList"
:key="item.title"
class="nav-item"
:class="{'active': isActive(index)}"
@command="handleCurrentTab($event, index)"
>
<!-- 菜单标题 -->
<span class="el-dropdown-link">
{{ isActive(index) ? list[currentTab] : item.title }}
<i class="el-icon-arrow-down el-icon--right" />
</span>
<!-- 菜单项 -->
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="(v, i) in item.list"
:key="v"
:command="i + navList.length"
>{{ v }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
// 其他代码......
</div>
</template>

<script>
export default {
props: {
// 当前的tab
currentTab: {
type: Number,
default: 0
},
// 导航标签
navList: {
type: Array,
default: () => []
},
// 下拉菜单
navDropList: {
type: Array,
default: () => []
}
},
data() {
return {
list: this.navList
}
},
created() {
// 合并标题
this.navDropList.forEach(v => {
this.list = [...this.list, ...v.list]
})
},
methods: {
// 改变当前tab
handleCurrentTab(index, step) {
let value = index
for (let i = 0; i < step; i++) {
value += this.navDropList[i].list.length
}
this.$emit('handleCurrentTab', value)
},
// 是否选中菜单标题
isActive(step) {
let minLen = 0
let maxLen = this.navList.length
for (let i = 0; i < step + 1; i++) {
minLen = maxLen
maxLen += this.navDropList[i].list.length
}
return this.currentTab >= minLen && this.currentTab < maxLen
}
}
}
</script>

<style lang="less" scoped>
@import '~assets/less/variable.less';
.nav-tab-wrap{
height: 62px;
margin: 0 24px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 0 0 4px 4px;
background-color: #fff;
.nav-list{
flex: 1;
display: flex;
.nav-item{
color: @fontColor2;
font-size: 16px;
cursor: pointer;
& + .nav-item{
margin-left: 40px;
}
&:hover,
&.active{
color: @themeColor;
}
}
}
}
</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
<template>
<div class="my-tab-wrap">
<nav-tab
:current-tab="currentTab"
:nav-list="navList"
:nav-drop-list="navDropList"
@handleCurrentTab="handleCurrentTab"
/>
</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import navTab from '../components/navTab'
export default {
components: {
navTab
},
data() {
return {
navList: ['标题1', '标题2', '标题3', '标题4'],
navDropList: [{
title: '菜单1',
list: ['菜单标题1', '菜单标题2', '菜单标题3']
}, {
title: '菜单2',
list: ['菜单标题1', '菜单标题2']
}]
}
},
computed: {
...mapState({
currentTab: state => state.myResource.currentTab
})
},
methods: {
...mapMutations('myResource', ['handleCurrentTab'])
}
}
</script>

<style lang="less" scoped>

</style>

vuex

myResource 模块下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const state = {
// 当前tab下标
currentTab: 2
}

const mutations = {
// 改变当前tab下标
handleCurrentTab(state, index) {
state.currentTab = index
}
}

const actions = {

}

export default {
namespaced: true,
state,
mutations,
actions
}
-------------本文结束感谢您的阅读-------------