{"id":563,"date":"2024-01-13T19:36:49","date_gmt":"2024-01-13T11:36:49","guid":{"rendered":"https:\/\/fugary.com\/?p=563"},"modified":"2024-01-13T20:08:00","modified_gmt":"2024-01-13T12:08:00","slug":"%e4%bb%8e%e9%9b%b6%e6%90%ad%e5%bb%ba%e5%9f%ba%e4%ba%8eelement-plus%e7%9a%84vue3%e9%a1%b9%e7%9b%ae06-%e5%ae%9e%e7%8e%b0%e5%a4%9atab%e9%a1%b5%e9%9d%a2","status":"publish","type":"post","link":"https:\/\/fugary.com\/?p=563","title":{"rendered":"\u4ece\u96f6\u642d\u5efa\u57fa\u4e8eelement-plus\u7684Vue3\u9879\u76ee06\u2014\u2014\u5b9e\u73b0\u591aTab\u9875\u9762"},"content":{"rendered":"

\u76ee\u524d\u5f88\u591a\u540e\u53f0\u7ba1\u7406\u6846\u67b6\u90fd\u652f\u6301\u591aTAB<\/code>\u6a21\u5f0f\uff0c\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n

\"image-20240113190850344\"<\/div><\/p>\n

\u56e0\u6b64\u6211\u4eec\u8fd9\u4e5f\u8981\u652f\u6301\u591a\u4e2aTAB<\/code>\uff0c\u8981\u652f\u6301\u591a\u4e2aTAB<\/code>\uff0c\u9700\u8981\u5b58\u50a8\u591a\u4e2aTAB<\/code>\u9875\u9762\u7684\u540d\u79f0\u7b49\u4fe1\u606f\u3002<\/p>\n

\u6b64\u529f\u80fd\u76f8\u5bf9\u6bd4\u8f83\u590d\u6742\uff0c\u96be\u5ea6\u8f83\u5927<\/p>\n

\u57fa\u672c\u529f\u80fd\u8bbe\u8ba1<\/h3>\n

\u652f\u6301\u529f\u80fd\uff1a<\/p>\n

    \n
  1. \u652f\u6301TAB<\/code>\u540d\u79f0\u548c\u56fe\u6807\u5c55\u793a<\/li>\n
  2. \u652f\u6301TAB<\/code>\u5173\u95ed<\/li>\n
  3. TAB<\/code>\u652f\u6301\u53f3\u952e\u83dc\u5355\uff0c\u53ef\u4ee5\u5173\u95ed\u591a\u4e2aTAB<\/code><\/li>\n
  4. \u7528KeepAlive<\/code>\u7f13\u5b58TAB<\/code>\u72b6\u6001<\/li>\n
  5. \u5173\u95ed\u540eKeepAlive<\/code>\u7f13\u5b58\u79fb\u9664<\/li>\n
  6. \u7236\u5b50\u5173\u7cfb\u7684\u9875\u9762\u5728\u76f8\u540c\u7684TAB<\/code>\u4e2d\u5c55\u793a<\/li>\n<\/ol>\n

    \u5b58\u50a8TAB\u4fe1\u606f<\/h3>\n

    \u65b0\u5efa\u4e00\u4e2aTabsViewStore<\/code>\u5b58\u50a8TAB<\/code>\u4fe1\u606f\uff0c\u5b58\u50a8TAB<\/code>\u548c\u63d0\u4f9bTAB<\/code>\u7684\u589e\u5220\u7b49\u64cd\u4f5caction<\/code>\uff1a<\/p>\n

    import { ref } from 'vue'\nimport { defineStore } from 'pinia'\n\nexport const useTabsViewStore = defineStore('tabsView', () => {\n  const isTabMode = ref(true) \/\/ \u662f\u5426\u5f00\u542ftab\u6a21\u5f0f\n  const isCachedTabMode = ref(true) \/\/ \u662f\u5426\u7f13\u5b58\n  const isShowTabIcon = ref(true) \/\/ \u662f\u5426\u663e\u793aTAB\u7684\u56fe\u6807\n  const currentTab = ref('') \/\/ \u5f53\u524dTAB\n  const historyTabs = ref([]) \/\/ TAB\u8bb0\u5f55\n  const cachedTabs = ref([]) \/\/ \u7f13\u5b58\u7684KEY\uff0c\u76f4\u63a5\u7ed9keepalive\u4f7f\u7528\n\n  const clearAllTabs = () => {\n    historyTabs.value = []\n    cachedTabs.value = []\n  }\n  const clearHistoryTabs = () => {\n    if (historyTabs.value.length) {\n      let idx = historyTabs.value.findIndex(v => currentTab.value && v.path === currentTab.value)\n      idx = idx > -1 ? idx : 0\n      const tab = historyTabs.value[idx]\n      removeOtherHistoryTabs(tab)\n    }\n  }\n  const findHistoryTab = (path) => {\n    const idx = historyTabs.value.findIndex(v => v.path === path)\n    if (idx > -1) {\n      return historyTabs.value[idx]\n    }\n  }\n  const checkMataReplaceHistory = (historyTab, tab) => {\n    \/\/ \u5982\u679cmeta\u4e2d\u914d\u7f6e\u6709replaceTabHistory\uff0c\u9ed8\u8ba4\u66ff\u6362\u76f8\u5173\u7684tab\n    return historyTab.meta && historyTab.meta.replaceTabHistory && historyTab.meta.replaceTabHistory === tab.name\n  }\n  const isSameReplaceHistory = (historyTab, tab) => {\n    return historyTab.meta && historyTab.meta.replaceTabHistory && tab.meta && tab.meta.replaceTabHistory &&\n        historyTab.meta.replaceTabHistory === tab.meta.replaceTabHistory\n  }\n  const addHistoryTab = (tab) => {\n    \/\/ \u6dfb\u52a0tab\n    if (isTabMode.value) {\n      const idx = historyTabs.value.findIndex(v => v.path === tab.path)\n      if (idx < 0) {\n        const replaceIdx = historyTabs.value.findIndex(v => checkMataReplaceHistory(v, tab) ||\n            checkMataReplaceHistory(tab, v) || isSameReplaceHistory(v, tab))\n        let replaceTab = null\n        if (replaceIdx > -1) {\n          replaceTab = historyTabs.value[replaceIdx]\n          historyTabs.value.splice(replaceIdx, 1, Object.assign({}, tab))\n        } else {\n          historyTabs.value.push(Object.assign({}, tab)) \/\/ \u53ef\u80fd\u662fProxy\uff0c\u9700\u8981\u89e3\u6790\u51fa\u6765\n        }\n        addCachedTab(tab, replaceTab)\n      }\n    }\n  }\n  const removeHistoryTab = tab => {\n    if (historyTabs.value.length > 1) {\n      const idx = historyTabs.value.findIndex(v => v.path === tab.path)\n      if (idx > -1) {\n        removeCachedTab(historyTabs.value[idx])\n        \/\/ \u5220\u9664tab\n        historyTabs.value.splice(idx, 1)\n      }\n      return historyTabs.value[historyTabs.value.length - 1]\n    }\n  }\n  const removeOtherHistoryTabs = tab => {\n    historyTabs.value = [tab]\n    cachedTabs.value = []\n    if (isCachedTabMode.value && tab.name) {\n      cachedTabs.value = [tab.name]\n    }\n  }\n  const removeHistoryTabs = (tab, type) => {\n    if (tab) {\n      const idx = cachedTabs.value.findIndex(v => v === tab.name)\n      let removeTabs = []\n      if (type === 'right') {\n        removeTabs = historyTabs.value.splice(idx + 1)\n      } else if (type === 'left') {\n        removeTabs = historyTabs.value.splice(0, idx)\n      }\n      if (removeTabs.length) {\n        removeTabs.forEach(removeCachedTab)\n      }\n    }\n  }\n  const addCachedTab = (tab, replaceTab) => {\n    if (isCachedTabMode.value && tab.name && !tab.name.includes('-')) {\n      removeCachedTab(replaceTab)\n      if (!cachedTabs.value.includes(tab.name)) {\n        cachedTabs.value.push(tab.name)\n      }\n    }\n  }\n\n  const removeCachedTab = tab => {\n    if (tab) {\n      const idx = cachedTabs.value.findIndex(v => v === tab.name)\n      if (idx > -1) {\n        cachedTabs.value.splice(idx, 1)\n      }\n    }\n  }\n\n  const hasCloseDropdown = (tab, type) => {\n    const idx = historyTabs.value.findIndex(v => v.path === tab.path)\n    switch (type) {\n      case 'close':\n      case 'other':\n        return historyTabs.value.length > 1\n      case 'left':\n        return idx !== 0\n      case 'right':\n        return idx !== historyTabs.value.length - 1\n    }\n  }\n\n  return {\n    isTabMode,\n    isCachedTabMode,\n    isShowTabIcon,\n    currentTab,\n    historyTabs,\n    cachedTabs,\n    changeTabMode (val) {\n      isTabMode.value = val\n      if (!isTabMode.value) {\n        clearHistoryTabs()\n      }\n    },\n    changeCachedTabMode (val) {\n      isCachedTabMode.value = val\n      if (!isCachedTabMode.value) {\n        cachedTabs.value = []\n      }\n    },\n    removeHistoryTab,\n    removeOtherHistoryTabs,\n    removeHistoryTabs,\n    clearAllTabs,\n    clearHistoryTabs,\n    findHistoryTab,\n    addHistoryTab,\n    addCachedTab,\n    removeCachedTab,\n    hasCloseDropdown\n  }\n}, {\n  persist: true\n})\n<\/code><\/pre>\n
    \u5c01\u88c5TABS\u7ec4\u4ef6<\/h3>\n
    \u5faa\u73afstore<\/code>\u4e2d\u7684tabsViewStore.historyTabs<\/code>\uff0c\u5e76\u663e\u793a\u5230\u9875\u9762\u4e0a\uff0c\u4f7f\u7528\u4e86el-tabs<\/code>\uff0c\u4e0d\u8fc7\u6bcf\u4e2aTAB<\/code>\u7684\u5185\u5bb9\u90e8\u5206\u5e76\u4e0d\u9700\u8981\uff0c\u5185\u5bb9\u4f7f\u7528router-view<\/code>\u6765\u5c55\u793a<\/p>\n
    <script setup>\nimport { useTabsViewStore } from '@\/stores\/TabsViewStore'\nimport { useRoute, useRouter } from 'vue-router'\nimport { onMounted, ref, watch } from 'vue'\nimport isString from 'lodash\/isString'\nimport TabsViewItem from '@\/components\/common-tabs-view\/tabs-view-item.vue'\n\nconst router = useRouter()\nconst route = useRoute()\nconst tabsViewStore = useTabsViewStore()\nwatch(route, () => {\n  if (route.path) {\n    tabsViewStore.addHistoryTab(route)\n    tabsViewStore.currentTab = route.path\n  }\n})\n\nonMounted(() => {\n  if (!tabsViewStore.historyTabs.length) {\n    tabsViewStore.addHistoryTab(route)\n  }\n  tabsViewStore.currentTab = route.path\n})\n\nconst selectHistoryTab = path => {\n  const tab = isString(path) ? tabsViewStore.findHistoryTab(path) : path\n  if (tab) {\n    router.push(tab)\n    tabsViewStore.addCachedTab(tab)\n  }\n}\n\nconst removeHistoryTab = path => {\n  const lastTab = tabsViewStore.removeHistoryTab({ path })\n  if (lastTab) {\n    selectHistoryTab(lastTab)\n  }\n}\n\nconst refreshHistoryTab = tab => {\n  const time = new Date().getTime()\n  router.push(`${tab.path}?${time}`)\n  tabsViewStore.addCachedTab(tab)\n}\n\nconst removeOtherHistoryTabs = tab => {\n  tabsViewStore.removeOtherHistoryTabs(tab)\n  selectHistoryTab(tab.path)\n}\n\nconst removeHistoryTabs = (tab, type) => {\n  tabsViewStore.removeHistoryTabs(tab, type)\n  selectHistoryTab(tab.path)\n}\n\nconst tabItems = ref()\nconst onDropdownVisibleChange = (visible, tab) => {\n  if (visible) {\n    tabItems.value.forEach(({ dropdownRef }) => {\n      console.info(Object.assign({}, dropdownRef))\n      if (dropdownRef.id !== tab.path) {\n        dropdownRef.handleClose()\n      }\n    })\n  }\n}\n\n<\/script>\n\n<template>\n  <el-tabs\n    v-bind="$attrs"\n    v-model="tabsViewStore.currentTab"\n    class="common-tabs"\n    type="card"\n    :closable="tabsViewStore.historyTabs.length>1"\n    @tab-change="selectHistoryTab"\n    @tab-remove="removeHistoryTab"\n  >\n    <tabs-view-item\n      v-for="item in tabsViewStore.historyTabs"\n      ref="tabItems"\n      :key="item.path"\n      :tab-item="item"\n      @refresh-history-tab="refreshHistoryTab"\n      @remove-other-history-tabs="removeOtherHistoryTabs"\n      @remove-history-tabs="removeHistoryTabs"\n      @on-dropdown-visible-change="onDropdownVisibleChange"\n      @remove-history-tab="removeHistoryTab"\n    \/>\n  <\/el-tabs>\n<\/template>\n\n<style scoped>\n.common-tabs .el-tabs__header {\n  margin: 0;\n}\n<\/style>\n<\/code><\/pre>\n
    TabsViewItem\u7ec4\u4ef6<\/h3>\n
    \u8fd9\u4e2a\u7ec4\u4ef6\u7528\u4e8e\u751f\u6210\u5b9e\u9645\u7684\u6bcf\u4e2atab\u7684\u6837\u5f0f\uff0c\u5e76\u6dfb\u52a0\u53f3\u952e\u83dc\u5355\u652f\u6301\u5173\u95ed\u7b49\u64cd\u4f5c\uff0c\u83dc\u5355\u6807\u9898\u3001\u56fe\u6807\u7b49\u4fe1\u606f\u4ece\u83dc\u5355\u914d\u7f6e\u6216\u8005\u8def\u7531\u914d\u7f6e\u4e2d\u83b7\u53d6\u3002<\/p>\n
    \"image-20240113192552196\"<\/div><\/p>\n
    <script setup>\nimport { useMenuInfo, useMenuName } from '@\/components\/utils'\nimport { computed, ref } from 'vue'\nimport { useTabsViewStore } from '@\/stores\/TabsViewStore'\n\nconst tabsViewStore = useTabsViewStore()\n\nconst props = defineProps({\n  tabItem: {\n    type: Object,\n    required: true\n  }\n})\n\ndefineEmits(['removeHistoryTab', 'removeOtherHistoryTabs', 'removeHistoryTabs', 'refreshHistoryTab', 'onDropdownVisibleChange'])\n\nconst menuName = computed(() => {\n  return useMenuName(props.tabItem)\n})\n\nconst menuInfo = computed(() => {\n  return props.tabItem.path === '\/' ? { icon: 'HomeFilled' } : useMenuInfo(props.tabItem)\n})\n\nconst menuIcon = computed(() => {\n  if (menuInfo.value && menuInfo.value.icon) {\n    return menuInfo.value.icon\n  }\n  if (props.tabItem.meta && props.tabItem.meta.icon) {\n    return props.tabItem.meta.icon\n  }\n  return null\n})\nconst dropdownRef = ref()\n\ndefineExpose({\n  dropdownRef\n})\n\n<\/script>\n\n<template>\n  <el-tab-pane\n    :name="tabItem.path"\n  >\n    <template #label>\n      <el-dropdown\n        :id="tabItem.path"\n        ref="dropdownRef"\n        trigger="contextmenu"\n        @visible-change="$emit('onDropdownVisibleChange', $event, tabItem)"\n      >\n        <span class="custom-tabs-label">\n          <common-icon\n            v-if="tabsViewStore.isShowTabIcon && menuIcon"\n            :icon="menuIcon"\n          \/>\n          <span>{{ menuName }}<\/span>\n        <\/span>\n        <template #dropdown>\n          <el-dropdown-menu>\n            <el-dropdown-item\n              @click="$emit('refreshHistoryTab', tabItem)"\n            >\n              <common-icon icon="refresh" \/>\n              {{ $t('common.label.refresh') }}\n            <\/el-dropdown-item>\n            <el-dropdown-item\n              v-if="tabsViewStore.hasCloseDropdown(tabItem, 'close')"\n              @click="$emit('removeHistoryTab', tabItem.path)"\n            >\n              <common-icon icon="close" \/>\n              {{ $t('common.label.close') }}\n            <\/el-dropdown-item>\n            <el-dropdown-item\n              v-if="tabsViewStore.hasCloseDropdown(tabItem, 'left')"\n              @click="$emit('removeHistoryTabs', tabItem, 'left')"\n            >\n              <common-icon icon="KeyboardDoubleArrowLeftFilled" \/>\n              {{ $t('common.label.closeLeft') }}\n            <\/el-dropdown-item>\n            <el-dropdown-item\n              v-if="tabsViewStore.hasCloseDropdown(tabItem, 'right')"\n              @click="$emit('removeHistoryTabs', tabItem, 'right')"\n            >\n              <common-icon icon="KeyboardDoubleArrowRightFilled" \/>\n              {{ $t('common.label.closeRight') }}\n            <\/el-dropdown-item>\n            <el-dropdown-item\n              v-if="tabsViewStore.hasCloseDropdown(tabItem, 'other')"\n              @click="$emit('removeOtherHistoryTabs', tabItem)"\n            >\n              <common-icon icon="PlaylistRemoveFilled" \/>\n              {{ $t('common.label.closeOther') }}\n            <\/el-dropdown-item>\n          <\/el-dropdown-menu>\n        <\/template>\n      <\/el-dropdown>\n    <\/template>\n  <\/el-tab-pane>\n<\/template>\n\n<style scoped>\n.common-tabs .custom-tabs-label .el-icon {\n  vertical-align: middle;\n}\n.common-tabs .custom-tabs-label span {\n  vertical-align: middle;\n  margin-left: 4px;\n}\n<\/style>\n<\/code><\/pre>\n
    \u83b7\u53d6\u5c55\u793alabel<\/code>\uff0c\u4f18\u5148\u4ece\u83dc\u5355\u4fe1\u606f(\u53ef\u4ee5\u7528\u63a5\u53e3)\u83b7\u53d6\uff0c\u6ca1\u6709\u5c31\u4ece\u8def\u7531\u7684meta<\/code>\u83b7\u53d6\uff1a<\/p>\n
    export const useMenuName = item => {\n  const menuInfo = useMenuInfo(item)\n  if (menuInfo) {\n    if (menuInfo.label) {\n      return menuInfo.label\n    }\n    if (menuInfo.labelKey) {\n      return $i18nBundle(menuInfo.labelKey)\n    }\n  }\n  if (item.meta && item.meta.labelKey) {\n    return $i18nBundle(item.meta.labelKey)\n  }\n  return item.name || 'No Name'\n}<\/code><\/pre>\n
    KeepAlive\u914d\u7f6e<\/h3>\n
    \u662f\u5426\u5c55\u793atabs<\/code>\u89c6\u56fe\u90e8\u5206<\/p>\n
      <el-header\n    v-if="tabsViewStore.isTabMode"\n    class="tabs-header"\n  >\n    <common-tabs-view \/>\n  <\/el-header><\/code><\/pre>\n
    KeepAlive<\/code>\u914d\u7f6e\u8def\u7531\uff0c\u4f7f\u7528include<\/code>\u6307\u5411tabsViewStore.cachedTabs<\/code><\/p>\n
    <router-view v-slot="{ Component, route }">\n  <transition\n    name="slide-fade"\n    mode="out-in"\n  >\n    <KeepAlive\n      :include="tabsViewStore.cachedTabs"\n      :max="10"\n    >\n      <component\n        :is="Component"\n        :key="route.fullPath"\n      \/>\n    <\/KeepAlive>\n  <\/transition>\n<\/router-view><\/code><\/pre>\n
    \u6709\u70b9\u9700\u8981\u6ce8\u610f\uff0cKeepAlive\u7684include\u91cc\u9762\u6570\u7ec4\u7684\u5b57\u7b26\u4e32\u4e00\u5b9a\u8981\u7528Component\u7684\u540d\u5b57\uff0c\u56e0\u6b64\u5982\u679croute\u7684name\u548ccomponent\u7684\u540d\u5b57\u4e0d\u4e00\u6837\u53ef\u80fd\u7f13\u5b58\u65e0\u6548<\/strong><\/p>\n
    \u914d\u7f6e\u5b8c\u6210\u540e\u53ef\u4ee5\u770b\u5230\u5207\u6362TAB<\/code>\u65f6\uff0c\u5e76\u6ca1\u6709\u91cd\u590d\u6267\u884conMounted<\/code>\u3002<\/p>\n
    \u6700\u7ec8\u5f00\u6e90\u5730\u5740\uff1a<\/p>\n
    https:\/\/github.com\/fugary\/simple-element-plus-template<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    \u76ee\u524d\u5f88\u591a\u540e\u53f0\u7ba1\u7406\u6846\u67b6\u90fd\u652f\u6301\u591aTAB\u6a21\u5f0f\uff0c\u6548\u679c\u5982\u4e0b\uff1a \u56e0\u6b64\u6211\u4eec\u8fd9\u4e5f\u8981\u652f\u6301\u591a\u4e2aTAB\uff0c\u8981\u652f\u6301\u591a\u4e2aTAB\uff0c\u9700\u8981\u5b58\u50a8\u591a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[143,10,142],"_links":{"self":[{"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/posts\/563"}],"collection":[{"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fugary.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=563"}],"version-history":[{"count":4,"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/posts\/563\/revisions"}],"predecessor-version":[{"id":568,"href":"https:\/\/fugary.com\/index.php?rest_route=\/wp\/v2\/posts\/563\/revisions\/568"}],"wp:attachment":[{"href":"https:\/\/fugary.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fugary.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fugary.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}