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

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

步骤一: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.mzph.cn/pingmian/611.shtml

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

相关文章

Unity导出package

C#代码导出后为一个dll,原有的不同平台的库不变。 以下操作均在build PC 平台下操作。 1.在要导出的文件夹下建assembly definition (Any platform) 2.将项目文件夹下的\Library\ScriptAssemblies中的相应assembly definition的dll复制到要导出的文件夹下 3.在uni…

基于Java+SpringBoot+Vue前后端分离仓库管理系统

基于JavaSpringBootVue前后端分离仓库管理系统 🍅 作者主页 央顺技术团队 🍅 欢迎点赞 👍 收藏 ⭐留言 📝 🍅 文末获取源码联系方式 📝 🍅 查看下方微信号获取联系方式 承接各种定制系统 &#…

Vue3基本功能介绍

文章目录 Vue3组件中的模板结构可以没有根标签div组合式APIRefReactive函数回顾Vue2响应式Vue3实现响应式对比reactive和refSetup注意点计算属性与监听computedWatchWatchEffectVue3生命周期自定义hook函数toRef其他组合APIshallowReactiveshallowRefreadonly和shallowOnlyToRa…

赋能企业高效精准的EDM邮件群发推广

数字化营销日益成为商业增长引擎,云衔科技以其创新的智能EDM(Electronic Direct Mail)邮件群发推广解决方案,帮助企业客户突破传统营销模式,实现业绩飞跃和品牌影响力的大幅提升。 作为数字化广告营销及SaaS软件服务领…

安装mysql5.7.26一个报错问题

首先先安装mysql5.7.26,因为要求安装的版本要和原来的一样,数据路径也要和原来一致 一、安装mysql5.7.26 mysql官网各种版本下载网址 MySQL :: Download MySQL Community Server (Archived Versions) 1、下载mysql安装包 2、环境准备 centos7.9 mysql5.7.26包…

【简单介绍下Faiss原理和使用】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出…

有哪些公认好用且免费的云渲染网渲平台?渲染100邀请码1a12

现在云渲染是越来越火了,无论是在建筑设计、影视动画还是效果图行业都有它的身影,云渲染能缩短制作周期,提高工作效率,那么市面上有哪些公认好用且免费的云渲染平台呢?这次我们来了解下。 首先,我们来看看有…

牛客Linux高并发服务器开发学习第三天

静态库的使用(libxxx.a) 将lession04的文件复制到lession05中 lib里面一般放库文件 src里面放源文件。 将.c文件转换成可执行程序 gcc main.c -o app main.c当前目录下没有head.h gcc main.c -o app -I ./include 利用-I 和head所在的文件夹,找到head。 main.c…

Redis中的Lua脚本(五)

Lua脚本 脚本复制 复制EVALSHA命令 EVALSHA命令式所有与Lua脚本有关的命令中,复制操作最复杂的一个,因为主服务器与从服务器载入Lua脚本的情况可能有所不同,所以主服务器不能像复制EVAL命令、SCRIPT LOAD命令或者SCRIPT FLUSH命令那样&…

[大模型]Qwen-7B-Chat 接入langchain搭建知识库助手

Qwen-7B-Chat 接入langchain搭建知识库助手 环境准备 在autodl平台中租一个3090等24G显存的显卡机器,如下图所示镜像选择PyTorch–>2.0.0–>3.8(ubuntu20.04)–>11.8 接下来打开刚刚租用服务器的JupyterLab,并且打开其中的终端开始环境配置…

河北专升本(c语言各种编程题)

目录 第一类、递归调用 第二类、特殊数字 第三类、多维数组 第四类、字符处理 第五类、数学问题 第六类、排序算法 第七类、循环问题 第八类、进制转换 第九类、实际应用 第十类、图形输出 第一类、递归调用 1.汉诺塔:请输入盘子数,输出盘子移动…

05_Flutter屏幕适配

05_Flutter屏幕适配 一.屏幕适配方案 通过指定基准屏宽度,进行适配,基准屏宽度取决于设计图的基准宽度,以iphone 14 pro max为例, devicePixelRatio 物理宽度 / 逻辑宽度(基准宽度) iphone 14 pro max的物理尺寸宽度为1290&…

基于SSM的购物小程序01

4.1系统架构设计 购物系统设计的系统项目的概述设计分析,主要内容有学习平台的具体分析,进行数据库的是设计,数据采用mysql数据库,并且对于系统的设计采用比较人性化的操作设计,对于系统出现的错误信息可以及时做出处…

【Linux系统】地址空间 Linux内核进程调度队列

1.进程的地址空间 1.1 直接写代码&#xff0c;看现象 1 #include<stdio.h>2 #include<unistd.h>3 4 int g_val 100;5 6 int main()7 {8 int cnt 0;9 pid_t id fork();10 if(id 0)11 {12 while(1)13 {14 printf(&…

如何用flutter写一个好的登录页面

编写一个好的登录页面是构建用户友好且安全的移动应用的重要一步。下面是使用Flutter编写一个好的登录页面的一些建议和步骤&#xff1a; 1. 设计用户界面 1.简洁明了的布局&#xff1a;确保界面简洁明了&#xff0c;不要过分复杂&#xff0c;避免用户感到困惑。 2.清晰的输入框…

SQL刷题---2021年11月每天新用户的次日留存率

解题思路&#xff1a; 1.首先算出每个新用户注册的日期,将其命名为表a select uid,min(date(in_time)) dt from tb_user_log group by uid2.计算出每个用户登录的天数,将其命名为表b select uid,date(in_time) dt from tb_user_log union select uid,date(out_time) dt fro…

校园小情书微信小程序源码/社区小程序前后端开源/校园表白墙交友小程序

校园小情书前端代码&#xff0c;好玩的表白墙、树洞、校园论坛&#xff0c;可独立部署&#xff0c;也可以使用我部署的后台服务&#xff0c;毕业设计的好项目。 搭建教程&#xff1a; 一、注册管理后台 1、登录小情书站点进行注册&#xff1a;https://你的域名 2、注册成功…

使用Docker搭建一主二从的redis集群

文章目录 一、根据基础镜像构建三个docker容器二、构建master机三、配置slave机四、测试 本文使用 主机指代 物理机、 master机指代“一主二从”中的 一主&#xff0c; slave机指代“一主二从”中的 二从 一、根据基础镜像构建三个docker容器 根据本文第一章&#xff08…

小红书笔记写作方法和技巧分享,纯干货!

很多小伙伴感叹小红书笔记流量就是一个玄学&#xff0c;有时精心撰写的笔记却没有人看&#xff0c;自己随便写的笔记却轻轻松松上热门。实际上你还是欠点火候&#xff0c;小红书笔记写作是有一套方法和技巧的&#xff0c;总归是有套路的&#xff0c;如果你不知道&#xff0c;请…

YOLOv5检测框crop、MobileNetv3分类网络

在实际深度学习项目中&#xff0c;目标检测算法检测出的目标也会作为分类网络的输入数据&#xff0c;利用目标检测算法的对被检测图像进行抠图&#xff0c;以抠出来的图来扩充分类网络的数据。本文主要讲解yolov5和mobilenetv3结合使用扩展数据样本。 目录 1、yolov5检测框cro…