📄 前端标签页管理

中键点击

中键鼠标 按下时，判断是鼠标中键就 关闭当前 tasgview

const onMousedownMenu = (v: RouteItem, e: MouseEvent) => {
  if (!v.meta?.isAffix && e.button === 1) {
    const item = Object.assign({}, { contextMenuClickId: 1, ...v });
    onCurrentContextmenuClick(item);
  }
};

右键菜单

代码路径：/@/layout/navBars/tagsView/contextmenu.vue，右键菜单与 当前页操作 一样，

onCurrentContextmenuClick 参数包含：

0 刷新当前

1 关闭当前

2 关闭其它

3 关闭全部

4 当前页全屏

具体可查看代码 /@/layout/navBars/tagsView/tagsView.vue 中的 onCurrentContextmenuClick 方法

// 当前项右键菜单点击
const onCurrentContextmenuClick = async (item: RouteItem) => {
  item.commonUrl = transUrlParams(item);
  if (!getCurrentRouteItem(item))
    return ElMessage({
      type: "warning",
      message: "请正确输入路径及完整参数（query、params）",
    });
  const { path, name, params, query, meta, url } = getCurrentRouteItem(item);
  switch (item.contextMenuClickId) {
    case 0:
      // 刷新当前
      if (meta.isDynamic) await router.push({ name, params });
      else await router.push({ path, query });
      refreshCurrentTagsView(route.fullPath);
      break;
    case 1:
      // 关闭当前
      closeCurrentTagsView(getThemeConfig.value.isShareTagsView ? path : url);
      break;
    case 2:
      // 关闭其它
      if (meta.isDynamic) await router.push({ name, params });
      else await router.push({ path, query });
      closeOtherTagsView(path);
      break;
    case 3:
      // 关闭全部
      closeAllTagsView();
      break;
    case 4:
      // 开启当前页面全屏
      openCurrenFullscreen(getThemeConfig.value.isShareTagsView ? path : url);
      break;
  }
};

当前页操作

参数说明：0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏。tagsView 只支持对当前页进行操作。

方法说明：onCurrentContextmenuClick 和参数字段名 contextMenuClickId 为固定，只需要传参数 0 - 4

代码地址：/@/views/fun/tagsView

1. 刷新（参数 0）

<script setup lang="ts">
  import { useRoute } from "vue-router";
  import mittBus from "/@/utils/mitt";

  // 定义变量内容
  const route = useRoute();

  // 0、刷新当前 tagsView
  const refreshCurrentTagsView = () => {
    mittBus.emit(
      "onCurrentContextmenuClick",
      Object.assign({}, { contextMenuClickId: 0, ...route })
    );
  };
</script>

2. 关闭（参数 1）

<script setup lang="ts">
  import { useRoute } from "vue-router";
  import mittBus from "/@/utils/mitt";

  // 定义变量内容
  const route = useRoute();

  // 1、关闭当前 tagsView
  const refreshCurrentTagsView = () => {
    mittBus.emit(
      "onCurrentContextmenuClick",
      Object.assign({}, { contextMenuClickId: 1, ...route })
    );
  };
</script>

3. 关闭其它（参数 2）

<script setup lang="ts">
  import { useRoute } from "vue-router";
  import mittBus from "/@/utils/mitt";

  // 定义变量内容
  const route = useRoute();

  // 2、关闭其它 tagsView
  const refreshCurrentTagsView = () => {
    mittBus.emit(
      "onCurrentContextmenuClick",
      Object.assign({}, { contextMenuClickId: 2, ...route })
    );
  };
</script>

4. 全部关闭（参数 3）

<script setup lang="ts">
  import { useRoute } from "vue-router";
  import mittBus from "/@/utils/mitt";

  // 定义变量内容
  const route = useRoute();

// 3、关闭全部 tagsView
  const refreshCurrentTagsView = () => {
    mittBus.emit(
      "onCurrentContextmenuClick",
      Object.assign({}, { contextMenuClickId: 3, ...route })
    );
  };
</script>

5. 当前页全屏（参数 4）

<script setup lang="ts">
  import { useRoute } from "vue-router";
  import mittBus from "/@/utils/mitt";

  // 定义变量内容
  const route = useRoute();

// 4、开启当前页面全屏
  const refreshCurrentTagsView = () => {
    mittBus.emit(
      "onCurrentContextmenuClick",
      Object.assign({}, { contextMenuClickId: 4, ...route })
    );
  };
</script>