|
|
@@ -5,6 +5,18 @@
|
|
|
<span :class="{ lineheight: route.path == item.path }">{{ item.name }}</span>
|
|
|
</lay-tag>
|
|
|
</div>
|
|
|
+ <div class="tag-operator-wp">
|
|
|
+ <lay-dropdown class="operator-btn" placement="bottom-end" updateAtScroll>
|
|
|
+ <lay-icon type="layui-icon-down" />
|
|
|
+ <template #content>
|
|
|
+ <lay-dropdown-menu>
|
|
|
+ <lay-dropdown-menu-item @click="handleClose(selectedMenu)">关闭当前标签页</lay-dropdown-menu-item>
|
|
|
+ <lay-dropdown-menu-item @click="handleCloseOther(selectedMenu)">关闭其它标签页</lay-dropdown-menu-item>
|
|
|
+ <lay-dropdown-menu-item @click="handleCloseAll()">关闭所有标签页</lay-dropdown-menu-item>
|
|
|
+ </lay-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </lay-dropdown>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -12,7 +24,7 @@
|
|
|
import { ref, watchEffect } from "vue";
|
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
|
|
|
-const emit = defineEmits(["close"]);
|
|
|
+const emit = defineEmits(["close", "closeOther", "closeAll"]);
|
|
|
|
|
|
const router = useRouter();
|
|
|
const route = useRoute();
|
|
|
@@ -25,9 +37,11 @@ interface MenuList {
|
|
|
templateName: string;
|
|
|
}
|
|
|
const menuList = ref<Array<MenuList>>([]);
|
|
|
+let selectedMenu = ref();
|
|
|
|
|
|
watchEffect(() => {
|
|
|
let routeInfo = { name: route.meta.title, path: route.path, query: route.query, templateName: route.name };
|
|
|
+ selectedMenu.value = routeInfo;
|
|
|
window.sessionStorage.setItem("_4L_S_MENU_PATH", JSON.stringify(routeInfo));
|
|
|
let routeList = window.sessionStorage.getItem("_4L_TAG_LIST");
|
|
|
let tagList = routeList ? JSON.parse(routeList) : [];
|
|
|
@@ -59,6 +73,20 @@ const handleClose = (menu: any) => {
|
|
|
window.sessionStorage.setItem("_4L_TAG_LIST", JSON.stringify(menuList.value));
|
|
|
emit("close", menu.templateName);
|
|
|
};
|
|
|
+const handleCloseOther = (menu: any) => {
|
|
|
+ menuList.value = menuList.value.filter((item: any) => item.path == menu.path);
|
|
|
+ window.sessionStorage.setItem("_4L_TAG_LIST", JSON.stringify(menuList.value));
|
|
|
+ emit("closeOther", menu.templateName);
|
|
|
+};
|
|
|
+const handleCloseAll = () => {
|
|
|
+ const defaultMenu = JSON.parse(window.sessionStorage.getItem("_4L_MENU_PATH") || "{}");
|
|
|
+ menuList.value = selectedMenu.value.path == defaultMenu.path ? [selectedMenu.value] : [];
|
|
|
+ window.sessionStorage.setItem("_4L_TAG_LIST", JSON.stringify(menuList.value));
|
|
|
+ jumpPage(defaultMenu);
|
|
|
+ setTimeout(() => {
|
|
|
+ emit("closeAll", selectedMenu.value.templateName);
|
|
|
+ }, 100);
|
|
|
+};
|
|
|
|
|
|
const jumpPage = (menu: any) => {
|
|
|
router.push({ path: menu.path, query: menu.query });
|
|
|
@@ -69,7 +97,14 @@ const jumpPage = (menu: any) => {
|
|
|
background: white;
|
|
|
width: 100%;
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
.tag-list {
|
|
|
+ width: 0;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
padding: 10px;
|
|
|
.tag-item {
|
|
|
cursor: pointer;
|
|
|
@@ -82,5 +117,12 @@ const jumpPage = (menu: any) => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .tag-operator-wp {
|
|
|
+ width: 30px;
|
|
|
+ .operator-btn {
|
|
|
+ padding: 2px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|