当前位置: 首页 > news >正文

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这种,

相关文章:

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 }" c…...

JSONObject在Android Main方法中无法实例化问题

目录 前言一、Main(非安卓环境)方法下运行二、安卓坏境下运行三、why? 前言 原生的json,即org.json.JSONObject; 在Android Studio中的Main方法里运行报错&#xff0c;但在安卓程序运行过程正常 一、Main(非安卓环境)方法下运行 static void test() {try {// 创建一个 JSON …...

京津冀协同发展:北京·光子1号金融算力中心——智能科技新高地

京津冀协同发展是党中央在新的历史条件下提出的一项重大国家战略&#xff0c;对于全面推进“五位一体”总体布局&#xff0c;以中国式现代化全面推进强国建设、民族复兴伟业&#xff0c;具有重大现实意义和深远历史意义。随着京津冀协同发展战略的深入推进&#xff0c;区域一体…...

aspnetcore使用jwt时一直提示401 authorization

测试aspnetcore使用Jwt做认证授权的时候&#xff0c;一直提示401 Authorization 最后发现问题所在&#xff0c;希望能有所帮助 1.检查注册了认证和授权中间件 缺一不可 /*认证*/app.UseAuthentication();/*授权*/app.UseAuthorization();2.检查swagger的配置项 builder.Servic…...

三款文案自动生成器,帮你轻松生成原创文案

文案在今天已经成为了许多企业和个人推广产品和服务的重要手段。然而&#xff0c;对于很多人来说&#xff0c;写作文案并非易事。有时候&#xff0c;我们可能会遇到文案灵感枯竭的情况&#xff0c;或者花费大量时间在寻找合适的词句上。但是&#xff0c;别担心&#xff01;现在…...

多线程并发模拟实现与分析:基于Scapy的TCP SYN洪水攻击实验研究

简介 实现基于Python实现的多线程TCP SYN洪水攻击。该实例利用Scapy库构造并发送TCP SYN数据包&#xff0c;通过多线程技术模拟并发的网络攻击行为。 实现原理 SYN Flood攻击是一种经典的分布式拒绝服务&#xff08;DDoS&#xff09;攻击方式&#xff0c;利用了TCP协议握手过…...

git命令行提交——github

1. 克隆仓库至本地 git clone 右键paste&#xff08;github仓库地址&#xff09; cd 仓库路径&#xff08;进入到仓库内部准备提交文件等操作&#xff09; 2. 查看main分支 git branch&#xff08;列出本地仓库中的所有分支&#xff09; 3. 创建新分支&#xff08;可省…...

LM2903BIDR比较器芯片中文资料规格书PDF数据手册参数引脚图功能封装尺寸图

产品概述&#xff1a; M393B 和 LM2903B 器件是业界通用 LM393 和 LM2903 比较器系列的下一代版本。下一代 B 版本比较器具有更低的失调电压、更高的电源电压能力、更低的电源电流、更低的输入偏置电流和更低的传播延迟&#xff0c;并通过专用 ESD 钳位提高了 2kV ESD 性能和输…...

遍历list过程中调用remove方法

1、普通for循环遍历List删除指定元素&#xff0c;list.remove(index) List<String> nameList new ArrayList<>(Arrays.asList("张三", "李四", "王五", "赵六")); nameList.add("张七"); nameList.add("…...

Java解决罗马数字转整数

Java解决罗马数字转整数 01 题目 罗马数字包含以下七种字符: I&#xff0c; V&#xff0c; X&#xff0c; L&#xff0c;C&#xff0c;D 和 M。 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 …...

无忧·企业文档v2.1.9新版本发布,全新升级,新变化让文档管理更无忧!

项目介绍​ JVS是企业级数字化服务构建的基础脚手架&#xff0c;主要解决企业信息化项目交付难、实施效率低、开发成本高的问题&#xff0c;采用微服务配置化的方式&#xff0c;提供了 低代码数据分析物联网的核心能力产品&#xff0c;并构建了协同办公、企业常用的管理工具等&…...

【C语言_指针[2]_复习篇】

目录 一、数组名的理解 二、使用指针访问一维数组中的每个元素 三、一维数组传参的本质 四、冒泡排序 五、二级指针 六、指针数组 七、指针数组模拟二维数组 一、数组名的理解 1. 一般情况下&#xff0c;数组名就是数组首元素的地址。 2. 特殊情况1&#xff1a;sizeof(数…...

Rust 泛型使用过程中的 <T> 和 ::<T> 的区别

Rust 的泛型语法中&#xff0c;<T> 和 ::<T> 有不同的用途和上下文&#xff0c;但它们都与泛型有关。 <T> 在类型定义中 当你在定义函数、结构体、枚举或其他类型时&#xff0c;使用 <T> 来表示泛型参数。例如&#xff1a; fn identity<T>(x:…...

C语言 ——注释

1.1 单行注释 - 语法&#xff1a;// 待注释的内容 - 位置&#xff1a;可放在代码后&#xff0c;称之为行尾注释&#xff1b; 也可放代码上一行&#xff0c;称作行上注释。 c // 这是单行注释文字 1.2 多行注释 - 语法&#xff1a;/* 待注释的内容 */ - 注意&#xff1a;多⾏…...

C# 协程的使用

C# 中的协程是通过使用 yield 关键字来实现的&#xff0c;它们允许在方法的执行中暂停和继续。协程通常用于处理异步操作、迭代和状态机等情况。以下是关于C#协程的介绍、使用场景以及优缺点的概述&#xff1a; 介绍&#xff1a; 在 C# 中&#xff0c;协程是通过使用 yield 语…...

程序分享--C语言字母转换大小写的3种方法

关注我&#xff0c;持续分享逻辑思维&管理思维&#xff1b; 可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导&#xff1b; 有意找工作的同学&#xff0c;请参考博主的原创&#xff1a;《面试官心得--面试前应该如何准备》&#xff0c;《面试官心得--面试时如何进行自…...

jmeter发送请求参数如何使用变量

问题描述 发送jmeter请求时&#xff0c;想设置请求参数为变量 解决方法...

go go.mod file not found in current directory or any parent directory

场景&#xff1a; 安装好 liteide 之后创建了第一个 “hello world” 的golang 项目&#xff0c;却报了如下错误。 原因分析&#xff1a; go 的环境配置问题。与 golang 的包管理有关。 解决方案&#xff1a; 如果你是 Windows 系统&#xff0c;快捷键 “WinR”&#xff0c…...

K8s的kubeadm方式部署集群实例

目录 一、准备环境 主机清单 修改主机名 设置防火墙、selinux状态 主机名解析 固定ip 重启网卡 同步时间 关闭swap分区 二、获取镜像 三、安装docker 四、配置kubeadm源 安装依赖包及常用插件 1.配置kubeadm源&#xff0c;安装对应版本 2.加载相关ipvs模块 3.配…...

GRU-深度学习循环神经网络情感分类模型搭建

摘要&#xff1a; 本文详细介绍了基于GRU的深度学习循环神经网络在情感分类任务中的应用&#xff0c;涵盖基础知识回顾、功能实现、技巧与实践、性能优化与测试&#xff0c;以及常见问题解答等环节。 阅读时长&#xff1a;约30分钟 关键词&#xff1a;GRU, 深度学习, 循环神经…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...