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

devtools/2024/10/19 23:24:05/

需求: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/devtools/5046.html

相关文章

第23天:安全开发-PHP应用后台模块SessionCookieToken身份验证唯一性

第二十三天 一、PHP后台身份验证模块实现 二、Cookie&Session技术&差异 1.生成cookie的原理图过程:见上图 客户端向服务器发送HTTP请求。服务器检查请求头中是否包含cookie信息。如果请求头中包含cookie信息,则服务器使用该cookie来识别客户端…

详解Qt中的时间——QDateTime、QDate、QTime、QTimeZone

在软件开发中,准确、高效地处理时间信息是许多应用程序的核心需求。Qt框架作为一个功能强大的跨平台应用开发工具包,为开发者提供了丰富的类和函数来处理各种时间相关的任务。本文将深入探讨Qt中关于时间管理的关键类和方法,并通过详细的C代码…

binary tree Leetcode 二叉树算法题

144.二叉树的前序遍历 前序遍历是&#xff1a;根-左-右 所以记录序列的的时候放在最前面 递归 class Solution {List<Integer> ans new ArrayList<>();public List<Integer> preorderTraversal(TreeNode root) {if(root null) return ans;ans.add(root…

【ARM 裸机】I.MX 启动方式之启动头文件 1

接上一节&#xff1a;【ARM 裸机】I.MX 启动方式之启动设备的选择&#xff1b; 2、启动头文件 当 BOOT_MODE1 为 1&#xff0c;BOOT_MODE0 为 0 的时候此内部 BOOT 模式&#xff0c;在此模式下&#xff0c;芯片会执 行内部的 BOOT ROM 代码&#xff0c;这段 BOOT ROM 代码会进…

【前端】1. HTML【万字长文】

HTML 基础 HTML 结构 认识 HTML 标签 HTML 代码是由 “标签” 构成的. 形如: <body>hello</body>标签名 (body) 放到 < > 中大部分标签成对出现. <body> 为开始标签, </body> 为结束标签.少数标签只有开始标签, 称为 “单标签”.开始标签和…

Android 混淆模板

保持对外门面类 -keep public class com.xx.devtools.middle.manager.DevLogManager { public *; } 保持model类 -keep public class com.xx.devtools.middle.model.** { public *; } -keep public class com.xx.devtools.middle.Globals { public *; } 保持Bus注册方法 -…

rust学习笔记

一、常用trait Clone&Copy pub trait Clone: Sized {fn clone(&self) -> Self; }pub trait Copy: Clone { } Clone Copy let y x;let y x.clone();发生移动编译报错√发生移动发生拷贝√√发生拷贝发生拷贝 Clone&#xff1a;可以理解为深拷贝&#xff0c;例如…

Midjourney简明教程 - 合集

Midjourney简明教程&#xff08;一&#xff09;&#xff1a;有关Midjourney的基本信息 AI绘画 绘画是人类一门很古老的艺术门类&#xff0c;人类通过实体的器具、画笔、颜色、颜料等反映客观世界和表达主观世界。 而AI绘画则是通过借助就计算机机器学习算法和模型来生成绘画…