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

49次阅读

共计 1388 个字符，预计需要花费 4 分钟才能阅读完成。

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