ant-design-vue 中标签页tab上额外的元素(tabBarExtraContent) , tab选项卡头增加文字

公司有个需求，在ant-design-vue的标签页上，在tab选项卡头增加文字。

具体需求效果，如下图。

实现原理：

一、主要用到插槽（slot）

二、代码如下：

<a-tabs style="background:#FFFFFF;" v-model:activeKey="activeKey"><a-tab-pane key="1" tab="全部" >Content of Tab Pane 1</a-tab-pane><a-tab-pane key="2" tab="未认领" force-render>Content of Tab Pane 2</a-tab-pane><a-tab-pane key="3" tab="待跟进">Content of Tab Pane 3</a-tab-pane><a-tab-pane key="4" tab="待签约">Content of Tab Pane 4</a-tab-pane><template #tabBarExtraContent><div class="tab" style="display:flex;"><div class="tab1">13</div><div class="tab2">9</div><div class="tab2">7</div><div class="tab2 tab3">13</div></div></template></a-tabs>

具体样式，自己手动调。
下面是我的例子：我用的less

//默认右浮动
/deep/ .ant-tabs-extra-content{// float: left!important;position: absolute;
}
.tab{.tab1{width: 32px;height: 20px;background: #FFF1B8;border-radius: 10px;margin: 13px 78px 0px 48px;font-family: 'Inter';font-style: normal;font-weight: 400;font-size: 12px;line-height: 20px;color: #D48806;text-align: center;}.tab2{width: 24px;height: 20px;background: #F0F0F0;border-radius: 10px;margin: 13px 78px 0px 0px;font-family: 'Inter';font-style: normal;font-weight: 400;font-size: 12px;line-height: 20px;text-align: center;font-feature-settings: 'tnum' on, 'lnum' on;color: #697089;}.tab3{margin-left: 4px;}
}

ant-design-vue 中标签页tab上额外的元素(tabBarExtraContent) , tab选项卡头增加文字相关推荐

解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
Ant design vue中实现动态更换主题色
一.创建vue项目可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口输入文件名 ,文件名最好是英文然后进行配置功能, 根据需求选择配置功能这里最好选择2.0版本, 可以 ...
Ant Design Vue中出现报错： Invalid prop: custom validator check failed for prop “pagination“
一.问题背景最近在搞一个英语学习平台管理系统的时候,遇到了一个问题,莫名奇妙报了一个pagination的校验错误警告,这可把我整懵逼了看了一下代码,也没有错撒,而且我之前封装的组件用的好好的,怎么 ...
Ant Design Vue 中 Tree 树形控件 defaultExpandAll 设置无效
问题: 在代码中设置了default-expand-all属性树形结构还是没有展开原因: 因为default-expand-all属性是用来设置默认值的,而初始值treeData通常情况下是需要调 ...
oracle中showTime用法,ant design vue中日期选择框混合时间选择器的用法
首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: 其中,showTime.defaultValue是设置的默认展 ...
ant design vue中分页器的使用注意事项
1. 输入defaultPageSize: '5',pageSizeOptions: ['5', '10', '15', '20']等时,需要是String的形式,否则只会展示具体数字,而不是以5条/ ...
Vue - Ant Design Vue 中＜a-select＞选择器组件，既可从下拉列表选择，又可输入手动输入文本（既可下拉选择又可自己输入）
前言网上的代码基本上都是无效的,且代码非常乱还有bug. 这种需求其实不算太常见,网上基本没有相关文章, 本文给您提供一样详细的示例,您可以快速移植到您的项目中. 如果您要实现如下图所示既可下拉选 ...

ant-design-vue 中标签页tab上额外的元素(tabBarExtraContent) , tab选项卡头增加文字

公司有个需求，在ant-design-vue的标签页上，在tab选项卡头增加文字。

ant-design-vue 中标签页tab上额外的元素(tabBarExtraContent) , tab选项卡头增加文字相关推荐

最新文章

热门文章