TAB切换可以通过router或者v-if两种方式制作但是如果用router会导致路由层级嵌套过多,并且配置相对麻烦
所以决定使用
v-if来制作
代码如下：
<--html-->
<div
@click="toggleTab(item.component,index)" // 点击传入要显示组件的名字,和索引
v-for="(item,index) in navList" // 对按钮数组进行循环渲染
:class="{active:index==num}" // 控制激活样式
:key="index"
>{{ item.title }}</div>
<keep-alive>
<termInfo :is="tab" keep-alive></termInfo>// 通过动态is 显示要渲染的组件
</keep-alive>
<--js-->
import networkMsg from "./components/networkMsg";
import dhcpState from "./components/dhcpState";
import termInfo from "./components/termInfo";//引入组件
export default {
components: {//注册组件
networkMsg,
dhcpState,
termInfo
},
data() {
return {
navList: [//要显示的按钮数组
{ title: "服务器状态信息", component: "termInfo" },
{ title: "网络接口信息", component: "networkMsg" },
{ title: "DHCP4 服务配置", component: "dhcpState" },
{ title: "DHCP6 服务配置", component: "dhcpState" }
],
tab: "termInfo", // 控制显示组件
num: ""//通过传入的索引控制让谁显示激活样式
};
},
methods: {
toggleTab(tab, index) {//当点击tab栏时,修改要渲染的组件,传入要激活样式的索引
this.tab = tab;
this.num = index;
}
}
};
<--css-->
.active {
background: #0099cc;
color: #fff;
}
