[前端]仿Chrome实现标签栏(react)-1

想给自己的后台添加一个标签切换组件，没找到合适的，正好看到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 });
    // ...
}, []);

待完善

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