效果图:
代码:
<template>
<div class="nav-panel flex-center-center">
<div class="wrapper flex-center-center">
<div
class="nav-item"
:class="{active: index == nowIndex}"
v-for="(tabItem,index) in tabParams"
@click="tabToggle(index)"
:key="index"
>
<span :class="{dropdownBtn: index == 3}" @click="dropdown">{{tabItem}}</span>
<ul v-if="index == 3" class="dropdownWrapper" v-show="dropdownActive">
<li v-for="(item, index) in dropParams" :key="index">{{item}}</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
nowIndex: 0,
dropdownActive: false,
tabParams: ["菜单一", "菜单二", "菜单三", "菜单四"],
dropParams: ["子菜单一", "子菜单二", "子菜单三", "子菜单四"],
};
},
methods: {
dropdown: function () {
console.log(event.target.getAttribute("class"));
if (event.target.getAttribute("class") === "dropdownBtn") {
this.dropdownActive = !this.dropdownActive;
}
},
tabToggle: function (index) {
this.nowIndex = index;
if (index === 3) {
return;
} else {
this.dropdownActive = false;
}
},
},
};
</script>
<style scoped>
.flex-center-center{
display: flex;
align-items: center;
justify-content: center;
}
.nav-panel {
width: 100%;
height: 60px;
background: #0a0a23;
box-shadow: 0px 1px 0px 0px rgba(235, 238, 245, 0.2);
position: relative;
}
.wrapper {
width: 100%;
padding: 0 0 0 200px;
}
.nav-item {
flex: 1;
cursor: pointer;
position: sticky;
left: 0;
top: 0;
z-index: 99;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
}
.nav-item.active {
color: #ffffff;
}
.dropdownWrapper {
background: red;
width: 152px;
height: 134px;
background: #ffffff;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
border-radius: 4px;
font-size: 14px;
line-height: 32px;
font-family: PingFangSC-Regular, PingFang SC;
text-align: center;
font-weight: 400;
color: #666666;
position: absolute;
top: 40px;
}
.dropdownWrapper li {
display: block;
}
.dropdownBtn {
display: inline-block;
width: 100%;
height: 100%;
}
</style>