vue 手动实现tab栏

最新推荐文章于 2024-07-18 03:25:49 发布

原创最新推荐文章于 2024-07-18 03:25:49 发布 · 451 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #vue.js

前端同时被 2 个专栏收录

27 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

本文介绍如何在Vue.js项目中，由于第三方组件样式不满足需求，选择手动编写Tab栏组件的过程，提供了基本实现思路。

由于UI样式的影响，el-tabs实现起来比较麻烦，所以选择自己手动写

activeName: "zujian1",
listTop: [{ name: '组件1', id: 'zujian1' },
     { name: '组件2', id: 'zujian2' },
     { name: '组件3', id: 'zujian3' },],


<div class="tabs-ul">
	<span v-for="(item,index) in listTop" :key="index" @click="activeName = item.id"
		:class="activeName == item.id?'is-active':''">{{item.name}}</span>
	<div class="tabs-ul-bar" :class="activeName == 'zujina1'?'one':activeName == 'zujian2'?'two':'three'"></div>
</div>
<section>
	<zujian1 v-if="activeName == 'zujian1'" />
	<zujian2 v-if="activeName == 'zujian2'"/>
	<zujian3 v-if="activeName == 'zujian3'"/>
</section>


.one {
	transition: 0.2s;
	transform-origin: center;
	transform: translateX(0px);
}
.two {
	transition: 0.2s;
	transform-origin: center;
	transform: translateX(88px);
}
.three {
	transition: 0.2s;
	transform-origin: center;
	transform: translateX(178px);
}