187 lines
3.7 KiB
Vue
187 lines
3.7 KiB
Vue
<template>
|
|
<div class="navigation-container">
|
|
<!-- 导航栏 -->
|
|
<div class="nav-tabs">
|
|
<div v-for="(tab, index) in tabs" :key="index" :class="['nav-tab', { active: activeTab === index }]"
|
|
@click="switchTab(index)">
|
|
{{ tab.value }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "NavigationTabs",
|
|
props: {
|
|
// 外部传入的标签数据
|
|
tabsData: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
// 默认激活的标签索引
|
|
defaultActive: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
activeTab: this.defaultActive,
|
|
// 默认标签数据
|
|
defaultTabs: [{
|
|
key: "created",
|
|
label: "我创建的",
|
|
title: "我创建的内容",
|
|
content: "这里显示您创建的所有内容和项目。",
|
|
},
|
|
{
|
|
key: "hosted",
|
|
label: "我主持的",
|
|
title: "我主持的内容",
|
|
content: "这里显示您正在主持的活动和会议。",
|
|
},
|
|
{
|
|
key: "managed",
|
|
label: "我管理的",
|
|
title: "我管理的内容",
|
|
content: "这里显示您管理的团队和资源。",
|
|
},
|
|
{
|
|
key: "focused",
|
|
label: "我关注的",
|
|
title: "我关注的内容",
|
|
content: "这里显示您关注的话题和动态。",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
// 使用外部数据或默认数据
|
|
tabs() {
|
|
return this.tabsData.length > 0 ? this.tabsData : this.defaultTabs;
|
|
},
|
|
},
|
|
watch: {
|
|
// 监听外部传入的默认激活标签变化
|
|
defaultActive: {
|
|
handler(newVal) {
|
|
this.activeTab = newVal;
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
methods: {
|
|
// 切换标签
|
|
switchTab(index) {
|
|
if (index !== this.activeTab) {
|
|
this.activeTab = index;
|
|
// 向父组件发射事件
|
|
this.$emit("tab-change", {
|
|
index: index,
|
|
tab: this.tabs[index],
|
|
});
|
|
}
|
|
},
|
|
// 获取当前激活的标签数据
|
|
getCurrentTab() {
|
|
return this.tabs[this.activeTab];
|
|
},
|
|
// 程序化切换到指定标签
|
|
setActiveTab(index) {
|
|
if (index >= 0 && index < this.tabs.length) {
|
|
this.switchTab(index);
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
// 组件挂载后发射初始状态
|
|
this.$emit("tab-change", {
|
|
index: this.activeTab,
|
|
tab: this.tabs[this.activeTab],
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.navigation-container {
|
|
width: 100%;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
|
"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
|
}
|
|
|
|
/* 导航栏样式 */
|
|
.nav-tabs {
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.nav-tab {
|
|
flex: 1;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
/* transition: all 0.3s ease; */
|
|
border-radius: 6px;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
position: relative;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
margin: auto 10rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
}
|
|
|
|
.nav-tab:hover {
|
|
/* background-color: rgba(255, 255, 255, 0.3); */
|
|
color: #1a4332;
|
|
}
|
|
|
|
.nav-tab.active {
|
|
color: #333333;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
z-index: 5;
|
|
}
|
|
|
|
.nav-tab.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 14rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80%;
|
|
height: 16rpx;
|
|
background-image: var(--tab-url);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
border-radius: 1px;
|
|
z-index: -10;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.nav-tabs {
|
|
/* padding: 2px; */
|
|
}
|
|
|
|
.nav-tab {
|
|
padding: 8px 4px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
/* @keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
} */
|
|
</style> |