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


Posted in Vue.js onJanuary 19, 2021

问题描述

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

vue二选一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() {
   /*
    点击tab1的时候,让tab1显示,tab2隐藏,即showTabOne为true,showTabTwo为false
    同时修改tab1的样式使其"高亮",注意不要忘了修改tab2的样式,使其"不高亮"。
    点击tab2的时候,也是同理。
   */
   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栏切换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
vue 插槽简介及使用示例
Nov 19 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 #Vue.js
vue element el-transfer增加拖拽功能
Jan 15 #Vue.js
Vue实现多页签组件
Jan 14 #Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 #Vue.js
Vue中引入svg图标的两种方式
Jan 14 #Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 #Vue.js
vue 递归组件的简单使用示例
Jan 14 #Vue.js
You might like
crontab无法执行php的解决方法
2016/01/25 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
javascript基本语法分析说明
2008/06/15 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
如何根据业务封装自己的功能组件
2019/04/19 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
python字典DICT类型合并详解
2017/08/17 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
英国高街电视:High Street TV
2018/05/22 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
班组拓展活动方案
2014/08/14 职场文书
教师个人事迹材料
2014/12/17 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
紧急迫降观后感
2015/06/15 职场文书
2015中秋祝酒词
2015/08/12 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电