修改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 },
 ]

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

相关推荐

  1. UGUI分析与研究3-扩展UGUI实现自定义UI

    2024-04-20 18:42:04       20 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-20 18:42:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-20 18:42:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-20 18:42:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-20 18:42:04       18 阅读

热门阅读

  1. python图表用户界面(gui)的选择

    2024-04-20 18:42:04       12 阅读
  2. springboot 项目eureka注册中心切换为nacos+config

    2024-04-20 18:42:04       14 阅读
  3. 高频前端面试题汇总之手写代码篇

    2024-04-20 18:42:04       14 阅读
  4. Edge的使用心得与深度探索

    2024-04-20 18:42:04       16 阅读
  5. CPU执行过程

    2024-04-20 18:42:04       16 阅读
  6. Ansible离线安装

    2024-04-20 18:42:04       20 阅读
  7. Elasticsearch(1)

    2024-04-20 18:42:04       36 阅读