vue二选一tab栏切换新做法实现

时间:2021-05-26

问题描述

在我们做项目的过程中,有时候会要做一些tab栏切换效果。有两个tab的,有三个tab的,甚至有五六七八个tab的。平常我们直接拿饿了么的tab组件用就行了,但是偶尔自己闲着没事,自己写个两个tab切换效果的,即二选一效果。闲话少说,上动态效果图

本案例适合两个tab的(三个tab的可以仿照我的写,如果是四五个tab用饿了么组件会更快些)

代码如下

HTML部分

<template> <div id="app"> <div class="tabWrap"> <!-- 这个结构是tab导航,并给其绑定对应的点击事件,在点击事件的回调中 去控制对应内容的显示隐藏和样式的修改即:tab的切换--> <div class="tabNav"> <div class="navOne" @click="tabOne">tab1</div> <div class="navTwo" @click="tabTwo">tab2</div> </div> <!-- 这个结构是tab导航对应的内容 --> <div class="tabContent"> <!-- 通过v-show控制隐藏,同一时刻隐藏一个显示一个,就实现了tab栏的切换效果了 --> <div class="navOneBox" v-show="showTabOne">我是切换1</div> <div class="navTwoBox" v-show="showTabTwo">i am tab2</div> </div> </div> </div></template>

js部分

<script>export default { name: "app", data() { return { showTabOne: true, // 二选一tab切换 showTabTwo: false, // 二选一tab切换 }; }, methods: { // 二选一tab栏切换 tabOne() { this.showTabOne = true; this.showTabTwo = false; document.querySelector(".navOne").style.backgroundColor = "#fff"; document.querySelector(".navTwo").style.backgroundColor = "#e3e3e3"; document.querySelector(".navOne").style.color = "#3985EC"; document.querySelector(".navTwo").style.color = "#80868D"; }, // 二选一tab栏切换 tabTwo() { this.showTabTwo = true; this.showTabOne = false; document.querySelector(".navOne").style.backgroundColor = "#e3e3e3"; document.querySelector(".navTwo").style.backgroundColor = "#fff"; document.querySelector(".navTwo").style.color = "#3985EC"; document.querySelector(".navOne").style.color = "#80868D"; }, },};</script>

css部分

<style lang="less">.tabNav { width: 126px; height: 30px; border-radius: 2px; background-color: #e3e3e3; display: flex; align-items: center; justify-content: space-evenly; .navOne { width: 60px; height: 26px; border-radius: 2px; background-color: #fff; color: #3985ec; font-size: 14px; font-weight: 500; display: flex; justify-content: center; align-items: center; cursor: pointer; } .navTwo { width: 60px; height: 26px; color: #80868d; border-radius: 2px; font-size: 14px; font-weight: 500; display: flex; justify-content: center; align-items: center; cursor: pointer; }}.tabContent { margin-top: 8px; .navOneBox { background-color: #bfa; } .navTwoBox { background-color: #baf; }}</style>

到此这篇关于vue二选一tab栏切换新做法实现的文章就介绍到这了,更多相关vue tab栏切换内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章