修改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.mfbz.cn/a/548191.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

maven3.9的settings.xml 内容学习

settings.xml 文件介绍 settings.xml 是 Maven 的配置文件,它允许你自定义 Maven 的行为,比如设置仓库、代理、认证信息等。在 Maven 3.9 中,settings.xml 的结构和内容可能与之前的版本相似,但可能会有一些小的改进或变化。下面…

经典文献阅读之--RaLF(激光雷达地图中基于流的全局和度量雷达定位)

0. 简介 激光雷达地图中基于流的全局和度量雷达定位。自主机器人的定位是至关重要的。尽管基于相机和激光雷达的方法已经得到大量研究,但是它们会受到恶劣的光照和天气条件的影响。因此,最近雷达传感器由于其对这种条件固有的鲁棒性而受到关注。在《RaL…

回归预测 | Matlab实现SSA-GRNN麻雀算法优化广义回归神经网络多变量回归预测(含优化前后预测可视化)

回归预测 | Matlab实现SSA-GRNN麻雀算法优化广义回归神经网络多变量回归预测(含优化前后预测可视化) 目录 回归预测 | Matlab实现SSA-GRNN麻雀算法优化广义回归神经网络多变量回归预测(含优化前后预测可视化)预测效果基本介绍程序设计参考资料预测效果

linux应急响应基础命令

一、cpu使用率-top top -c -o %CPU -c 显示进程的命令行参数 -o 按照CPU占用从大到小排序二、用户信息 1、查看系统所有用户信息 [rootcentos7 ~]# cat /etc/passwd root:x:0:0:root:/root:/bin/bash bin:x:1:1:bin:/bin:/sbin/nologin daemon:x:2:2:daemon:/sbin:/sbin/nol…

FlexLua低代码技术,十分钟搞定4G转LoRa网关设备

在当今物联网时代,无线通信技术的发展日新月异,4G和LoRa作为两种不同的通信技术,各自拥有独特的优势和应用场景。而4G转LoRa网关设备的出现,则将这两种技术有效地结合起来,为物联网应用提供了更多可能性。 4G转LoRa网关…

室内设计师必备的免费3D模型网站,赶紧收藏!

3D模型已经成为室内设计师的重要工具。它们不仅能够帮助设计师更好地理解和呈现他们的设计概念,还能够提高工作效率,减少错误和修改的次数。然而,许多高质量的3D模型都需要付费购买,那么室内设计师必备的免费3D模型网站有哪些? 首…

探索C# 11与.NET 7:入门指南与跨平台开发

💂 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】🤟 一站式轻松构建小程序、Web网站、移动应用:👉注册地址🤟 基于Web端打造的:👉轻量化工具创作平台💅 想寻找共同学习交…

SpringBoot整合支付宝入门

支付宝支付 对接流程 申请阿里支付官方企业账号配置应用签约产品获取RSAKey(非对称加密)必须获得两个加密串:一个公钥,一个密钥SDK功能开发业务对接支付回调支付组件 核心所需的参数 APPID商家私钥支付宝公钥支付回调地址网关…

Backend - Django Swagger

目录 一、安装依赖 二、配置环境 三、路由(urls) 四、swagger UI 界面 (一)UI 界面 (二)单引号问题:Expecting property name enclosed in double quotes 1. 原因 2. 解决 五、自定义s…

【技能拾遗】——Markdown+Typora/VSCode与LaTeX的使用

📖 前言:Markdown 是一种轻量型标记语言,是一种语法. 以 .md 结尾的文本文件就是 Markdown 文件。 相较于 Word,它更加像是 HTML 语言或是 LaTeX \LaTeX LATE​X,并不是最淳朴的那种"所见即所得"。 它处处透…

RTX 腾讯通停止服务,有哪些平滑升级迁移替代方案?

RTX腾讯通,作为腾讯公司于2003年推出的企业即时通讯软件,曾经在政企单位中得到广泛应用。然而,自2015年后,这款软件就未曾更新,近期腾讯将RTX腾讯通官网的域名更改为跳转到企业微信官网,这意味RTX腾讯通正式…

AGI的智力有可能在两年内超过人类水平

特斯拉CEO埃隆马斯克近日与挪威银行投资管理基金CEO坦根的访谈中表示,AGI的智力将在两年内可能超过人类智力,在未来五年内,AI的能力很可能超过所有人类。 马斯克透漏,去年人工智能发展过程中的主要制约因素是缺少高性能芯片&#…

Leetcode-移除链表元素

203. 移除链表元素 题目 给你一个链表的头节点 head 和一个整数 val ,请你删除链表中所有满足 Node.val val 的节点,并返回 新的头节点 。 示例 1: 输入:head [1,2,6,3,4,5,6], val 6 输出:[1,2,3,4,5]示例 2&…

一张图教你看懂亚马逊云科技的超过200个云服务

亚马逊云科技(AWS)是业界服务种类最全面的☁️厂商,目前有超过200种服务,那这么多服务能否一次性把他们都记住呢? 小李哥给大家带来一张AWS 200项服务列表,大家一眼就能看懂这些服务的使用场景。欢迎大家在…

【HarmonyOS 4+NEXT】开发工具安装指南

🙋‍ 一日之际在于晨 ⭐本期内容:开发工具安装 🏆系列专栏:鸿蒙HarmonyOS4NEXT:探索未来智能生态新纪元 文章目录 前言准备工作下载开发工具安装开发工具配置开发环境总结 前言 随着科技的不断进步,智能设…

硬阈值什么意思?

硬阈值是一种非线性函数,常用于信号处理和数据压缩中的阈值处理。具体来说,硬阈值将输入信号中小于或等于给定阈值的值设为零,而大于阈值的值保持不变。数学表示如下: Hard(x, T) { 0, if |x| ≤ T; x, if |x| > T } 其中&a…

【电控笔记6.2】拉式转换与转移函数

概要 laplace:单输入单输出,线性系统 laplace 传递函数 总结

芯洲SCT55610三相栅极驱动器,打造高效无刷直流电机系统

近年来的,无刷直流电机(Brushless DC Motor, BLDC)在工业、汽车、家电、医疗器械等各个领域得到广泛应用。相对于传统有刷电机,BLDC电机具有以下优势:高效率、寿命长、低噪音、小型化和精确控制。这些优势使得BLDC电机…

Springboot集成Ehcache3实现本地缓存

如果只需要在单个应用程序中使用本地缓存&#xff0c;则可以选择Ehcache&#xff1b;它支持内存和磁盘存储&#xff0c;这里不以注解方式演示&#xff0c;通过自己实现缓存管理者灵活控制缓存的读写&#xff1b; 1、引入相关依赖 <!-- ehcache3集成start --><depende…

ENSP-旁挂式AC

提醒&#xff1a;如果AC不能成功上线AP&#xff0c;一般问题不会出在AC上&#xff0c;优先关注AC-AP线路上的二层或三层组网的三层交换机 拓扑图 管理VLAN&#xff1a;99 | 业务VLAN&#xff1a;100 注意点&#xff1a; 1.连接AP的接口需要打上pvid为管理vlan的标签 2.AC和…