vault backup: 2022-05-07 14:49:01

随时随地/管理后台中的 Tab 功能.md

@@ -50,13 +50,12 @@ const addTabItem = (path, search) => {
 
 ## Tabs 切换路由和关闭路由
 解决了 Tab 添加的问题，接下来要解决的就是 Tab 的切换和关闭，总不能只能开不能关吧，点击和切换的代码逻辑很简单，代码量也很少，没有什么难点
-对于路由的切换，我们需要一个新的状态来保存当前被选中的 Tab，这里叫作 activeTab
+对于 Tab 的切换，我们需要一个新的状态来保存当前被选中的 Tab，这里叫作 activeTab
 
 ```javascript
 // 用于保存当前选中 Tabs 的状态
 const [activeTab, setActiveTab] = useState("");
 
-// 路由的切换
 const switchTab = (path, search = "") => {
 	// 切换选中的 Tabs
 	setActiveTab(path);
@@ -64,3 +63,20 @@ const switchTab = (path, search = "") => {
 	navigate(path + search);
 };
 ```
+
+而对于 Tab 的关闭，就没什么好说的了，查找然后删除，这里有一个特殊的处理，就是判断关闭的 Tab 是不是当前选中的 Tab，对于关闭当前选中 Tab 的操作，这里会把当前选中的 Tab 移动，保证页面上不会出现关闭了 Tab 但是页面还没有被关闭的感觉
+
+```javascript
+const closeTab = (path) => {
+	const index = tabList.findIndex((item) => item.path === path);
+	if (index === -1 || path === "/") return;
+
+	const newTabList = [...tabList];
+	newTabList.splice(index, 1);
+
+	// 判断是否关闭当前选中的 Tab
+	if (path === activeTab) switchTab(newTabList[index - 1].path);
+
+	setTabList(newTabList);
+};
+```