想给本人的后盾增加一个标签切换组件，没找到适合的，正好看到Chrome的标签栏，切换起来十分丝滑，于是便借鉴剽窃一下

成果预览

CodeSandbox

Github

：拖动已实现

实现思路

简略说一下标签栏和右键菜单实现，具体参照代码

标签栏

<div className="container">    <div className="top" />    <div className="content">      <div        onContextMenu={(e) => onTagContextMenu(e, tag.path)}        className={`tag-c ${currentTag === tag.path ? "active" : ""}`}      >        <span className="tag-text">{tag.title}</span>        <span className="tag-close">X</span>      </div>    </div>    <div className="bottom" /></div
.tag-c {  padding: 10px;  border-top-left-radius: 10px;  border-top-right-radius: 10px;  padding: 8px 10px 0;  position: relative;  cursor: pointer;  font-size: 14px;  width: 120px;  box-sizing: border-box;  background-color: #ccc;  display: flex;  justify-content: space-between;  align-items: center;}.tag-c.active {  background-color: #ddd;}.tag-c.active::before {  position: absolute;  content: "";  height: 5px;  width: 9999px;  background-color: #ccc;  left: -9999px;  border-bottom-right-radius: 10px;  bottom: -5px;}.tag-c.active::after {  position: absolute;  content: "";  height: 5px;  width: 9999px;  background-color: #ccc;  left: 120px;  border-bottom-left-radius: 10px;  bottom: -5px;}
  • 整个div.container设置一个背景色，选中的div.tag-c设置高亮背景色
  • div.bottom设置高亮色
  • 增加上部圆角，应用div.tag-c的border-radius实现
  • 增加下部圆角，应用div.tag-c::after和div.tag-c::before实现

顶部增加div.top是为了占位，不便div.content居中

右键菜单

监听并重写div.tag-c的onContextMenu事件

const onTagContextMenu = useCallback((e, path) => {    e.preventDefault();    setContextMenuVisiable(true);    setContextMenuPos({ x: e.pageX, y: 20 });    // ...}, []);

待欠缺

  • 拖动标签(✅)
  • 标签宽度自适应
  • 一些切换动画(✅)