修改taro-ui-vue3的tabs组件源码增加数字标签

news/2024/12/22 20:09:57/

需求:taro-ui-vue3的tabs组件上增加数字标记

tarouivue3libtabsindexjs_3">步骤一:node_modules文件夹下找到taro-ui-vue3/lib/tabs/index.js

在这里插入图片描述

把173行的这一段替换成下面这段,然后写上样式

default: () => item.number ? [h(View, {class: 'at-tabs__item_in'}, {default: () => [h(Text, {style: "white-space: nowrap;"}, {default: () => item.title}),h(Text, {class: 'number'}, {default: () => item.number})]}),h(View, {class: "at-tabs__item-underline"})] : [h(Text, {style: "white-space: nowrap;"}, {default: () => item.title})]
步骤二、用patch-package保存

【patch-package用法传送门】

步骤三、tabs组件参数tab-list的设置

TAB_LIST: [{ title: '选项1', value: 0, number: 1 },{ title: '选项2', value: 1 },]

效果图
在这里插入图片描述


http://www.ppmy.cn/news/1424577.html

相关文章

如何在浏览器Web前端在线编辑PPT幻灯片?

有时候在项目中我们会遇到需要在网页在线打开并编辑PPT文档保存到本地或者服务器指定位置,猿大师办公助手可以很方便的调用本机Office实现在网页上编辑PPT幻灯片,效果与本机Office打开PPT完全一样。 猿大师办公助手支持完整嵌入模式,也就是本…

新型物联网创新实践教学体系建设

新型物联网创新实践教学体系建设 一、设计背景 随着物联网技术的快速发展,物联网已成为当今科技创新的重要领域。为了培养能够紧跟物联网技术发展趋势的高素质人才,高校物联网专业教学急需构建一套创新实践教学体系。本毕业设计旨在探索和设计一套新型…

K8s中的控制器和资源对象是什么关系呢?

K8s中的控制器和资源对象是什么关系呢? Kubernetes(简称k8s)是一个开源的容器编排平台,用于自动化部署、扩展和管理容器化应用程序。在Kubernetes中,控制器和资源对象是两个核心概念,它们共同构成了Kubern…

ChatGPT畅想:论文写作新境界

ChatGPT无限次数:点击直达 html ChatGPT畅想:论文写作新境界 作为一名拥有10年经验的CSDN网站原创文章优质创作者,我深知论文写作在科研领域的重要性。随着人工智能技术的发展,ChatGPT作为一款强大的语言模型,正在为论文写作带…

负载均衡的原理及算法

负载均衡(Load Balancing)是指在计算机网络中将工作负载(如请求、数据流量等)分配给多个计算资源(如服务器、网络连接等),以实现资源利用的均衡和性能优化。其原理和算法如下: 原理…

在Rust中使用ini配置文件

一、概述 INI文件是一种无固定标准格式的配置文件。它以简单的文字与简单的结构组成,常常使用在Windows操作系统上,许多程序也会采用INI文件作为配置文件使用。Windows操作系统后来以注册表的形式取代INI档。但是INI还是流传到现在。 rust-ini是一个在R…

一个文生视频MoneyPrinterTurbo项目解析

最近抖音剪映发布了图文生成视频功能,同时百家号也有这个功能,这个可以看做是一个开源的实现,一起看看它的原理吧~ 一句话提示词 大模型生成文案 百家号生成视频效果 MoneyPrinterTurbo生成视频效果 天空为什么是蓝色的? 天空…

CommunityToolkit.Mvvm笔记---AsyncRelayCommand

AsyncRelayCommand 是 CommunityToolkit.Mvvm 中的一个功能,专门设计用来处理异步操作。它是 RelayCommand 的一个变体,提供了对异步任务的支持,允许开发者在 MVVM(Model-View-ViewModel)模式中方便地实现异步命令。使…