vue3-element-admin（标签页缓存）

admin的标签页缓存以及设置

index.vue
<template>
  <div id="tags-view-container" class="tags-view-container">
    <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
      <router-link
        v-for="tag in visitedViews"
        :key="tag.path"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        :class="isActive(tag) ? 'active' : ''"
        class="tags-view-item"
        @click.middle.enter="!isAffix(tag) ? closeSelectedTag(tag) : ''"
        @contextmenu.prevent.enter="openMenu(tag, $event)"
      >
        {{ tag.title }}
        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
          <el-icon class="icon-close"><Close /></el-icon>
        </span>
      </router-link>
    </scroll-pane>
    <ul
      v-show="reactData.visible"
      :style="{ left: reactData.left + 'px', top: reactData.top + 'px' }"
      class="contextmenu"
    >
      <!-- <li @click="refreshSelectedTag(reactData.selectedTag)">刷新</li> -->
      <li v-if="!isAffix(reactData.selectedTag)" @click="closeSelectedTag(reactData.selectedTag)">关闭</li>
      <li @click="closeOthersTags">关闭其他</li>
      <li @click="closeAllTags(reactData.selectedTag)">全部关闭</li>
    </ul>
  </div>
</template>

<script setup>
import { defineComponent } from 'vue'
import ScrollPane from './scroll-pane.vue'
import path from 'path'
import { reactive, onMounted, watch, computed, nextTick, ref, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { Close } from '@element-plus/icons-vue'

const { proxy } = getCurrentInstance()
const scrollPaneRef = ref()
const store = useStore()
const router = useRouter()
const route = useRoute()
const reactData = reactive({
  visible: false,
  top: 0,
  left: 0,
  selectedTag: {},
  affixTags: []
})

const visitedViews = computed(() => {
  return store.state.tagsView.visitedViews
})
const routes = computed(() => {
  return store.state.permission.routes
})
watch(
  route,
  () => {
    addTags()
    moveToCurrentTag()
  },
  {
    immediate: true
  }
)
watch(
  () => reactData.visible,
  (value, v2) => {
    if (value) {
      document.body.addEventListener('click', closeMenu)
    } else {
      document.body.removeEventListener('click', closeMenu)
    }
  }
)

onMounted(() => {
  initTags()
  addTags()
})

function initTags() {
  const affixTags = (reactData.affixTags = filterAffixTags(routes.value))
  for (const tag of affixTags) {
    if (tag.name) {
      store.dispatch('tagsView/addVisitedView', tag)
    }
  }
}

function isActive(tag) {
  return tag.path === route.path
}

function isAffix(tag) {
  return tag.meta && tag.meta.affix
}
function filterAffixTags(routes, basePath = '/') {
  let tags = []
  routes.forEach(route => {
    if (route.meta && route.meta.affix) {
      const tagPath = path.resolve(basePath, route.path)
      tags.push({
        fullPath: tagPath,
        path: tagPath,
        name: route.name,
        meta: { ...route.meta }
      })
    }
    if (route.children) {
      const tempTags = filterAffixTags(route.children, route.path)
      if (tempTags.length >= 1) {
        tags = [...tags, ...tempTags]
      }
    }
  })
  return tags
}

function addTags() {
  const { name } = route
  if (name) {
    store.dispatch('tagsView/addView', route)
  }
  return false
}
function moveToCurrentTag() {
  const tags = visitedViews.value
  nextTick(() => {
    for (const tag of tags) {
      if (tag.path === route.path) {
        scrollPaneRef.value.moveToTarget(tag)
        // when query is different then update
        if (tag.fullPath !== route.fullPath) {
          store.dispatch('tagsView/updateVisitedView', route)
        }
        break
      }
    }
  })
}
function refreshSelectedTag(view) {
  store.dispatch('tagsView/delCachedView', view).then(() => {
    const { fullPath } = view
    nextTick(() => {
      router.replace({
        path: '/redirect' + fullPath
      })
    })
  })
}
function closeSelectedTag(view) {
  store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
    if (isActive(view)) {
      toLastView(visitedViews)
    }
  })
}
function closeOthersTags() {
  router.push(reactData.selectedTag)
  store.dispatch('tagsView/delOthersViews', reactData.selectedTag).then(() => {
    moveToCurrentTag(reactData.selectedTag)
  })
}
function closeAllTags(view) {
  store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
    if (reactData.affixTags.some(tag => tag.path === view.path)) {
      return
    }
    toLastView(visitedViews)
  })
}
function toLastView(visitedViews) {
  const latestView = visitedViews.slice(-1)[0]
  if (latestView) {
    router.push(latestView.fullPath)
  } else {
    // now the default is to redirect to the home page if there is no tags-view,
    // you can adjust it according to your needs.
    router.push('/trainingHome')
  }
}
function openMenu(tag, e) {
  const menuMinWidth = 105
  const offsetLeft = proxy?.$el.getBoundingClientRect().left // container margin left
  const offsetWidth = proxy?.$el.offsetWidth // container width
  const maxLeft = offsetWidth - menuMinWidth // left boundary
  const left = e.clientX - offsetLeft + 15 // 15: margin right

  if (left > maxLeft) {
    reactData.left = maxLeft
  } else {
    reactData.left = left
  }
  reactData.top = e.clientY - 60
  reactData.visible = true
  reactData.selectedTag = tag
}
function closeMenu() {
  reactData.visible = false
}
function handleScroll() {
  closeMenu()
}
</script>

<style lang="scss" scoped>
.tags-view-container {
  width: 100%;
  height: 34px;
  background: #fff;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);

  .tags-view-wrapper {
    .tags-view-item {
      position: relative;
      display: inline-block;
      padding: 0 8px;
      margin-top: 2px;
      margin-left: 5px;
      font-size: 12px;
      line-height: 26px;
      color: #495060;
      cursor: pointer;
      background: #fff;
      border: 1px solid #d8dce5;

      &:first-of-type {
        margin-left: 15px;
      }

      &:last-of-type {
        margin-right: 15px;
      }

      &.active {
        color: #fff;
        background-color: #42b983;
        border-color: #42b983;

        &::before {
          position: relative;
          display: inline-block;
          width: 8px;
          height: 8px;
          margin-right: 2px;
          background: #fff;
          border-radius: 50%;
          content: '';
        }
      }
      .icon-close {
        vertical-align: -2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        text-align: center;
        &:hover {
          background-color: #b4bccc;
          color: #fff;
        }
      }
    }
  }

  .contextmenu {
    position: absolute;
    z-index: 3000;
    padding: 5px 0;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    list-style-type: none;
    background: #fff;
    border-radius: 4px;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

    li {
      padding: 7px 16px;
      margin: 0;
      cursor: pointer;

      &:hover {
        background: #eee;
      }
    }
  }
}
</style>

scroll-pane.vue
<template>
  <el-scrollbar ref="scrollContainerRef" :vertical="false" class="scroll-container" @wheel.prevent="handleScroll">
    <slot />
  </el-scrollbar>
</template>

<script setup>
import { reactive, ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useStore } from 'vuex'

const emits = defineEmits(['scroll'])
const scrollContainerRef = ref()
const store = useStore()
const reactData = reactive({
  left: 0,
  tagAndTagSpacing: 4
})

const scrollWrapper = computed(() => {
  return scrollContainerRef.value.wrap$
})

onMounted(() => {
  scrollWrapper.value.addEventListener('scroll', emitScroll, true)
})
onBeforeUnmount(() => {
  scrollWrapper.value.removeEventListener('scroll', emitScroll)
})
const visitedViews = computed(() => {
  return store.state.tagsView.visitedViews
})

function handleScroll(e) {
  const eventDelta = e.wheelDelta || -e.deltaY * 40
  scrollWrapper.value.scrollLeft = scrollWrapper.value.scrollLeft + eventDelta / 4
}
function emitScroll() {
  emits('scroll')
}
function moveToTarget(currentTag) {
  const $container = scrollContainerRef.value.$el
  const $containerWidth = $container.offsetWidth
  const $scrollWrapper = scrollWrapper.value

  let firstTag = null
  let lastTag = null

  // find first tag and last tag
  if (visitedViews.value.length > 0) {
    firstTag = visitedViews.value[0]
    lastTag = visitedViews.value[visitedViews.value.length - 1]
  }

  if (firstTag === currentTag) {
    $scrollWrapper.scrollLeft = 0
  } else if (lastTag === currentTag) {
    $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
  } else {
    const tagListDom = document.getElementsByClassName('tags-view-item')
    const currentIndex = visitedViews.value.findIndex(item => item === currentTag)
    let prevTag = 0
    let nextTag = 0
    for (const k in tagListDom) {
      if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
          prevTag = tagListDom[k]
        }
        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
          nextTag = tagListDom[k]
        }
      }
    }
    // the tag's offsetLeft after of nextTag
    const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + reactData.tagAndTagSpacing
    // the tag's offsetLeft before of prevTag
    const beforePrevTagOffsetLeft = prevTag.offsetLeft - reactData.tagAndTagSpacing
    if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
      $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
    } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
      $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
    }
  }
}
defineExpose({
  moveToTarget
})
</script>

<style lang="scss" scoped>
.scroll-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;

  :deep(.el-scrollbar__bar) {
    bottom: 0;
  }

  :deep(.el-scrollbar__wrap) {
    height: 49px;
  }
}
</style>

网址：vue3-element-admin