首页 > 其他分享 >工作中遇到的tab提升问题,简单记录一下

工作中遇到的tab提升问题,简单记录一下

时间:2024-03-15 18:23:37浏览次数:31  
标签:逻辑 tab 遇到 记录 滚动条 点击 scrollToSelectedTab Tab

Tab enhancement;

应用场景

当tab足够多时,进行Tab功能提升。由上图实现下图。

前期css简单处理下,例如:tab最大宽度,tab超出文本省略号。开始处理逻辑:
当tab不够多不足以出现滚动条时:

此时也不需要过多的逻辑,只有删除tab后的选中逻辑;

当tab足够多足以出现滚动条时:

我们新建一个tab时,tab有默认tab名,此时tab滚动到最右边;

当修改完名称,自适应tab宽度至最右边;

当点击其他tab,且这个tab不完全暴露在视口时,点击后会滚动到该tab贴近左侧或者右侧,这里其实跟删除tab定位到上一个tab的功能是一样的。具体看思路及代码

那么还需要考虑到窗口变化时,也需要切换tab方法的判断:

实现思路


实现代码

这里有监听resize ,判断超出,没问题扔给scrollToSelectedTab方法

关键的scrollToSelectedTab方法



标签:逻辑,tab,遇到,记录,滚动条,点击,scrollToSelectedTab,Tab
From: https://www.cnblogs.com/zzxblogs999/p/18076004

相关文章

  • 2024-03-14 leetcode写题记录
    目录2024-03-14leetcode写题记录829.连续整数求和题目链接题意解法2024-03-14leetcode写题记录829.连续整数求和题目链接829.连续整数求和题意给定一个正整数\(n\),返回连续正整数满足所有数字之和为\(n\)的组数。示例1:输入:n=5输出:2解释:5=2+3,共有两......
  • 【Oracle】数据字典dba_tables
    视图dba_tables是数据库中所有数据表的描述。该视图包含的列属性还是非常多个,需要慢慢品味。查看视图如下:sys@PDB1>descdba_tables;NameNull?Type 描述------------------------------------------......
  • 超轻量级的c#版基于文件的日志记录工具,可定制输出格式,可指定日志文件
    这是我自己个人编写的日志记录,主要使用在只需要记录日志,偶尔到文件中查看一下日志记录的情况。我自己写的一些服务之类的是使用了这个的,代码很少,使用很简单。第一步搜索和安装我的Nuget包搜索和安装zmjtool这个包,我写的,如下图:第二步引入namespace和创建logger对象1/**引......
  • el-table 根据窗框大小 高度变化 固定表头
     <el-table:data="tableData"style="width:100%":height="tableHeight"><el-table-columnprop="date"label="日期"width="180"></el-table-column></el-table>......
  • tab切换 echarts图表消失
    tab切换echarts图表消失原因分析:当在从第二个tab切换到第一个tab的时候,此时渲染图表是不成功的,可以在点击到tab的时候打印一下当时的dom节点,就会发现此时dom为null,因此无法对配置项进行渲染。解决方案:需要在渲染配置之前先获取到这个dom节点,可以通过this.$nextTi......
  • 1秒AI出图的时代来了!Stable Diffusion WebUI Forge+SVD整合包
    速度快N倍!StableDiffusionWebUIForge整合包要说今年绘画圈最大的新秀那妥妥的就StableDiffution本次更新的StableDiffusionWebUIForge整合包+SVD比之前推送的更加智能、快速和简单有多简单呢?这么说吧之前的版本需要初中生级别现在的的幕后网整合包加强版小......
  • React Antd 的ProTable 如何默认展开树结构
    1、defaultExpandAllRows:true  defaultExpandAllRows设为true就可以了<ProTablerowKey="key"columns={rightBomColumnArr}dataSource={rightBomTableTreeData}......
  • 【已解决】Mybatis-plus中@TableLogic注解失效问题
    逻辑删除逻辑删除是指通过修改数据的状态或添加额外字段来表示数据的删除状态,而不是直接从数据库中物理删除数据记录。通常,会在数据库表中新增一个字段(如deleted),用来标识数据是否被删除。MyBatisPlus中实现逻辑删除在使用MyBatisPlus进行数据库操作时,实现逻辑删除......
  • 记录一次 nginx 代理调试 ie7
    worker_processes1;events{worker_connections1024;}http{includemime.types;default_type"text/html;charset=utf-8";sendfileon;keepalive_timeout65;server{listen80;server_namelocalh......
  • evel()与table里面循环校验器的结合使用
    <el-form:rules="rules"ref="formTableRef":model="formTable"label-position="top"label-width="100px"><el-table:data="formTable.tableData"style="width:100%">......