vue3前端tab切换

最新推荐文章于 2024-09-12 16:43:23 发布

susu1083018911

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量242

点赞数 2

文章标签：前端状态模式 vue.js

本文链接：https://blog.csdn.net/susu1083018911/article/details/142170821

版权

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%;

}