​
中键点击

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

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

​
刷新当前页（参数 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>

​
关闭当前页（参数 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>

​
关闭其他页（参数 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>

​
关闭所有页（参数 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>

​
当前页全屏（参数 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>

​
♥️ 获取支持

遇到问题？

如果您在使用过程中遇到任何问题、有功能建议或需求，请点击此卡片前往 Gitee 仓库提交 Issue。