vue3前端tab切换
vue代码：
<ul class ="devicetab">
<li v-for="tab in tabs" :key="tab.name" :class="{ active: activeTab === tab.name }" @click="changeTab(tab)">
<span>{{tab.title}}</span>
</li>
</ul>
js代码
const tabs = ref([
{ id:1, name: 'devicetype', title: '按类型' },
{ id:2, name: 'devicestatus', title: '按状态' },
]);
const activeTab = ref(tabs.value[1].name);
// 点击标签栏 切换
const changeTab = (item) => {
activeTab.value = item.name
}
return{
activeTab,tabs,changeTab
}
样式
.devicetab {
display: flex;
position: absolute;
right: 0;
height: 100%;
text-align: center;
}
.devicetab li {
width: 3vw;
height: 100%;
cursor: pointer;
display: flex;
align-items: center;
margin: 0 1px;
padding: 0 0.2vw;
/* background-color: coral; */
position: relative;
justify-content: center;
}
.devicetab li span{
color: #A0D9FF;
}
.devicetab li:hover{
background: url('@/assets/images/bg-tab-active.png') no-repeat center center;
background-size: 100% 100%;
}
.devicetab li:hover span{
color: #FFFFFF;
}
.devicetab .active {
color: #FFFFFF !important;
background: url('@/assets/images/bg-tab-active.png') no-repeat center center;
background-size: 100% 100%;
}