乐趣区

关于react.js:前端仿Chrome实现标签栏react1

想给本人的后盾增加一个标签切换组件,没找到适合的,正好看到 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-cborder-radius实现
  • 增加下部圆角,应用 div.tag-c::afterdiv.tag-c::before实现

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

右键菜单

监听并重写 div.tag-conContextMenu事件

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

待欠缺

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