vue3 实现一个tab切换组件

一. 效果图

请添加图片描述

二. 代码

文件 WqTab.vue:

<template><div ref="wqTabs" class="wq-tab"><template v-for="tab in tabs" :key="tab"><div class="tab-item" :class="{ ac: tabActive === tab.key }" @click="tabActive = tab.key">{{ tab.value || tab.key }}</div></template><divclass="bg":style="{width: bgWidth + 'px',left: bgLeft + 'px',}"></div></div>
</template>
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue';
import { Tab } from '@/components/WqTab/wqTabType';type Props = {tabs: Tab[];active: string;
};const props = withDefaults(defineProps<Props>(), {});
const emit = defineEmits(['update:active']);const tabActive = computed<string>({get() {return props.active;},set(newValue) {// 改变值emit('update:active', newValue);},
});
// wqTabs 元素
const wqTabs = ref();
// bg宽度
const bgWidth = ref<number>(0);
// bg 位置
const bgLeft = ref<number>(0);
watch(tabActive,(newValue, oldValue) => {// 改变背景nextTick(() => {const tabIndex = props.tabs.findIndex((item) => item.key === newValue);if (tabIndex >= 0) {/*** 当找到值时* 1. 找到相应的元素* 2. 获取元素的当前位置以及大小* 3, 将bg大小进行调整 并移动到相应的位置*/nextTick(() => {const tabs: Element[] | any = wqTabs.value.querySelectorAll('.tab-item');if (!tabs || !tabs.length) {// 若没有找到tabconsole.error('tab dom find error');return;}const tab = tabs[tabIndex];bgLeft.value = tab.offsetLeft as number;bgWidth.value = tab.clientWidth;// console.log('value', bgLeft.value, bgWidth.value);});} else {// 没有找到值的时候找defaultconst defaultTab = props.tabs.find((item) => item.default);tabActive.value = defaultTab?.key || props.tabs[0].key;}});},{ immediate: true }
);
</script>
<style scoped lang="scss">
.wq-tab {//width: 500px;//height: 50px;//width: 100%;margin: auto;display: flex;align-items: center;//justify-content: center;position: relative;border-radius: 25px;border: 1px solid #dfe4ea;overflow: hidden;.tab-item {flex: 1;text-align: center;//width: 100px;//padding: 0 30px;//max-width: 100px;height: 40px;line-height: 40px;position: relative;z-index: 2;//overflow: hidden;cursor: pointer;user-select: none;}.ac {color: #fff;}.bg {position: absolute;left: 0;top: 0;z-index: 1;//width: 150px;height: 50px;background: #b2bec3;transition: all 0.5s;}
}
</style>

文件: wqTabType

export type Tab = {// 唯一值key: string;//  非必需, 如果没有将使用key进行替换value?: string;// 是否为默认选项default?: boolean;
};

三. 使用:

<template><wq-tab v-model:active="tabActive" :tabs="tabs"></wq-tab>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import WqTab from '@/components/WqTab/WqTab.vue';
import { Tab } from '@/components/WqTab/wqTabType';const tabActive = ref('');const tabs: Tab[] = [{key: 'comp',value: '组件',default: true, // 这里是默认值},{key: 'app',value: '应用',},{key: 'web',value: '网站',},
];</script>

四. 补充

  1. 这个组件的宽度是基于父元素给的,
  2. 传递的 active 是v-model的
  3. 个人代码水平一般, 如果有什么不合理的地方欢迎大佬们留言
  4. 组件的父元素如果是可变大小的可能会产生样式错误, 比如父元素宽度使用vh, vw这种,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/739467.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络地址转换协议NAT

网络地址转换协议NAT NAT的定义 NAT&#xff08;Network Address Translation&#xff0c;网络地址转换&#xff09;是1994年提出的。当在专用网内部的一些主机本来已经分配到了本地IP地址&#xff08;即仅在本专用网内使用的专用地址&#xff09;&#xff0c;但现在又想和因…

浏览器缓存 四种缓存分类 两种缓存类型

浏览器缓存 本文主要包含以下内容&#xff1a; 什么是浏览器缓存按照缓存位置分类 Service WorkerMemory CacheDisk CachePush Cache 按照缓存类型分类 强制缓存协商缓存 缓存读取规则浏览器行为 什么是浏览器缓存 在正式开始讲解浏览器缓存之前&#xff0c;我们先来回顾一…

Python 的练手项目有哪些值得推荐?

Python 是一种强大的编程语言&#xff0c;有许多值得推荐的练手项目。以下是一些例子&#xff1a; 数据分析&#xff1a;利用 Python 的数据分析库&#xff08;如 pandas 和 NumPy&#xff09;处理和分析数据。你可以尝试对数据进行清洗、可视化&#xff0c;或者构建简单的预测…

韶音运动耳机好用吗?南卡、墨觉、韶音骨传导耳机三款全面评测

音乐是我生活中不可或缺的调味品&#xff0c;它伴随着我度过了无数个清晨的慢跑以及夜晚的悠闲散步。但是传统入耳式耳机总是让我感到不适&#xff0c;虽然它有着不错的降噪能力&#xff0c;但是很容易忽视周围环境的安全&#xff0c;而且运动的时候老容易掉。然后我遇到了骨传…

C++ 错误: 不能将“System::Object^“类型的值分配到“double“类型的实体

错误信息&#xff1a; 错误: 不能将"System::Object^"类型的值分配到"double"类型的实体 解决方案&#xff1a; 这个错误在C/CLI编程环境下出现&#xff0c;是因为你正在尝试将.NET类型System::Object^&#xff08;托管对象指针&#xff09;直接赋值给一…

个人博客网站前端页面的实现

博客网站前端页面的实现 博客登录页 相关代码 login.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…

8U VPX通用系统平台

19” 上架机箱&#xff0c;8U高 ? 外形尺寸532.6mm x 482.6mm x 387.2mm (HxWxD)&#xff0c; ? 前部支持12个标准6U5HP板卡插槽&#xff0c;2个6U10HP VPX电源插槽 ? 支持12个标准6U5HP RTM卡插槽 ? 底部可拆卸风扇盘&#xff0c;散热风道由下至上 ?…

基于SpringBoot和PotsGIS的各省地震震发可视化分析

目录 前言 一、后台接口研发 1、控制层实现 2、Mapper访问层 3、空间查询分析 二、前端可视化展示 1、主体地图定义 2、行政区划列表定义 3、行政区划定位 三、数据分析 1、北京市 2、广东省 3、青海省 4、湖南省 总结 前言 在之前的博文中&#xff0c;我们…

如何在Linux使用Docker部署Firefox并实现无公网IP访问本地浏览器

文章目录 1. 部署Firefox2. 本地访问Firefox3. Linux安装Cpolar4. 配置Firefox公网地址5. 远程访问Firefox6. 固定Firefox公网地址7. 固定地址访问Firefox Firefox是一款免费开源的网页浏览器&#xff0c;由Mozilla基金会开发和维护。它是第一个成功挑战微软Internet Explorer浏…

2024VLN综述(2)

5 AGENTS VLN代理根据其核心特征和技术方法可分为四种主要类型:基于表示学习、基于决策和策略学习、面向任务和数据驱动。这种分类反映了VLN代理在处理多模式信息、执行复杂推理、解决数据短缺和适应环境变化方面的独特策略。每一类代理都为VLN任务的特定方面提供了解决方案…

【Golang】golang使用三方SDK操作容器指南

【Golang】golang使用三方SDK操作容器指南 大家好 我是寸铁&#x1f44a; 总结了一篇 golang使用三方SDK操作容器✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 这应该是目前全网最全golang使用三方SDK操作容器的指南了✌️ CreateConfig 主要是创建容器的配置信息&#xff0c;常…

【VS Code插件开发】自定义指令实现 git 命令 (九)

&#x1f431; 个人主页&#xff1a;不叫猫先生&#xff0c;公众号&#xff1a;前端舵手 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域优质作者、阿里云专家博主&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; ✨优质专栏&#xff1a;VS Code插件开发极…

什么是VR虚拟现实体验店|VR主题馆加盟|元宇宙文化旅游

VR虚拟现实体验店是一种提供虚拟现实技术体验的场所。在这样的店铺里&#xff0c;顾客可以通过专业的设备和技术&#xff0c;体验虚拟现实技术带来的沉浸式感觉。 通常&#xff0c;这些商店提供一系列VR体验&#xff0c;包括互动游戏、沉浸式模拟、虚拟旅游和其他VR内容。客户可…

【linux】02 :Linux基础命令

1.掌握linux系统的目录结构 linux只有一个顶级目录&#xff0c;称之为&#xff1a;根目录。 windows系统有多个顶级目录&#xff0c;即各个盘符。 2.linux路径的描述方式 /在Linux中的表示&#xff1a;出现在开头表示根目录&#xff0c;出现在后面表示层级关系。 3.什么是命…

Early if-conversion - 优化阅读笔记

Early if-conversion 用于对于没有很多可预测指令的乱序CPU。目标是消除可能误预测的条件分支。 来自分支两侧的指令都会被推测性地执行&#xff0c;并使用 cmov 指令选择结果。 // SSAIfConv 类在确定可能的情况下&#xff0c;对SSA形式的机器码执行if-conversion。该类不包…

揭秘建筑类中级职称申报:是否能越过初级直接评审?

揭秘建筑类中级职称申报&#xff1a;是否能越过初级直接评审&#xff1f; 很多人想知道越过初级直接评审建筑类中级职称可以不&#xff1f; 关于越过初级职称/助理工程师直接申报建筑类中级职称&#xff0c;原则上是不行的&#xff0c;实际上分情况而定。如果你有二级建造师也…

前端页面兼容pc和手机端设置,等比例缩小

html页面 <meta name"viewport" content"widthdevice-width, initial-scale0, user-scalableyes,shrink-to-fitno">vue 在public里面的index.html里面设置 <meta name"viewport" content"widthdevice-width,initial-scale1.0,use…

【数据结构和算法】-贪心算法

贪心算法&#xff08;又称贪婪算法&#xff09;是一种在每一步选择中都采取在当前状态下最好或最优&#xff08;即最有利&#xff09;的选择&#xff0c;从而希望导致结果是全局最好或最优的算法。贪心算法在有最优子结构的问题中尤为有效&#xff0c;它通过将问题分解为一系列…

使用SpringBoot实现定时任务

在Spring Boot中实现定时任务非常简单&#xff0c;主要通过使用Scheduled注解。Spring Boot的Scheduled注解提供了一种简单的、声明式的方式来定义定时任务。这些任务可以按照指定的时间间隔执行&#xff0c;无需手动管理线程或定时器。下面是如何使用Spring Boot来实现定时任务…

linux ,Windows部署

Linux部署 准备好虚拟机 连接好查看版本&#xff1a;java -version安装jdk 解压命令&#xff1a;tar -zxvf 加jdk的压缩文件名cd /etc 在编辑vim profile文件 在最底下写入&#xff1a; export JAVA_HOME/root/soft/jdk1.8.0_151&#xff08;跟自己的jdk保持一致&#xff0…