diff --git a/随时随地/管理后台中的 Tab 功能.md b/随时随地/管理后台中的 Tab 功能.md index 114d1ac..77eb9a8 100644 --- a/随时随地/管理后台中的 Tab 功能.md +++ b/随时随地/管理后台中的 Tab 功能.md @@ -50,17 +50,33 @@ 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); // 跳转路由 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); +}; ``` \ No newline at end of file