web_dist/src/layout/default-layout/DefaultTabs.vue

<script setup lang="tsx">
import {useTab} from "@/pinia/use-tabs";
import {useCyNamespace} from "@/utils/xiaochan-element-plus";
import {Close} from "@element-plus/icons-vue";
import RightClickMenu from "@/components/menu-item/RightClickMenu.vue";
import router from "@/router";
import {ref, watch} from "vue";

const ns = useCyNamespace('default-tabs')
const tagRef = ref<HTMLElement | null>(null)
const opt = [
  {
    name: '关闭', click: (data, index) => {
      useTab.removeByIndex(index)
    }
  },
  {
    name: '关闭其他选项卡', click: (data, index: number) => {
      router.push(data.path)
      useTab.closeOther(index)
    }
  },
  {
    name: '关闭所有选项卡', click: (data, index) => {
      useTab.closeAll()
    }
  },
  {
    name: '关闭左侧选项卡', click: (data, index) => {
      useTab.closeLeft(index)
    }
  },
  {
    name: '关闭右侧选项卡', click: (data, index) => {
      useTab.closeRight(index)
    }
  }
]
const mousePosition = ref()
const contextmenuItem = (item, index, event) => {
  mousePosition.value = {
    event,
    data: item,
    index
  }
}

async function handleScrolling() {
  await nextTick()
  const name = router.currentRoute.value.name
  const key = `#router_tabs-${name}`
  const item = tagRef.value!.querySelector(key)
  item.scrollIntoView({
    block: 'center',
    inline: 'nearest',
    behavior: 'smooth'
  })
}

watch(() => useTab.tabs.value, () => {
  nextTick(() => {
    handleScrolling()
  })
}, {deep: true})

watch(() => router.currentRoute.value, () => {
  useTab.tabsAdd(router.currentRoute.value)
  handleScrolling()
}, {deep: true, immediate: true})
</script>

<template>
  <right-click-menu
      :mouse-position="mousePosition"
      :config="opt"/>
  <el-scrollbar>
    <div
        ref="tagRef"
        :class="[ns.b('tagsview')]"
    >
      <div
          :id="`router_tabs-${item.name}`"
          v-for="(item,index) in useTab.tabs.value"
          @click="useTab.routerPush(index)"
          @contextmenu.prevent="contextmenuItem(item,index,$event)"
          :class="[
              ns.is('active' , useTab.isActive(item.name)),
              ns.b('item')
          ]"
          class="layout-tabs_item">
        <span>
          {{ item.title }}
        </span>
        <el-icon
            @click.stop.prevent="useTab.removeByIndex(index)"
            style="margin-left: 5px">
          <Close/>
        </el-icon>
      </div>
    </div>
  </el-scrollbar>
</template>

<style lang="scss">
.tags-style-five-svg {
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKC0wLjEzMzUwNiA1MC4xMTkyIDUwKSIgaWQ9InN2Z18xIiBkPSJtMTAwLjExOTE5LDEwMGMtNTUuMjI4LDAgLTEwMCwtNDQuNzcyIC0xMDAsLTEwMGwwLDEwMGwxMDAsMHoiIG9wYWNpdHk9InVuZGVmaW5lZCIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjRjhFQUU3Ii8+CiAgPHBhdGggZD0ibS0wLjYzNzY2LDcuMzEyMjhjMC4xMTkxOSwwIDAuMjE3MzcsMC4wNTc5NiAwLjQ3Njc2LDAuMTE5MTljMC4yMzIsMC4wNTQ3NyAwLjI3MzI5LDAuMDM0OTEgMC4zNTc1NywwLjExOTE5YzAuMDg0MjgsMC4wODQyOCAwLjM1NzU3LDAgMC40NzY3NiwwbDAuMTE5MTksMGwwLjIzODM4LDAiIGlkPSJzdmdfMiIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0ibTI4LjkyMTM0LDY5LjA1MjQ0YzAsMC4xMTkxOSAwLDAuMjM4MzggMCwwLjM1NzU3bDAsMC4xMTkxOWwwLDAuMTE5MTkiIGlkPSJzdmdfMyIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z180IiBoZWlnaHQ9IjAiIHdpZHRoPSIxLjMxMTA4IiB5PSI2LjgzNTUyIiB4PSItMC4wNDE3MSIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z181IiBoZWlnaHQ9IjEuNzg3ODQiIHdpZHRoPSIwLjExOTE5IiB5PSI2OC40NTY1IiB4PSIyOC45MjEzNCIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z182IiBoZWlnaHQ9IjQuODg2NzciIHdpZHRoPSIxOS4wNzAzMiIgeT0iNTEuMjkzMjEiIHg9IjM2LjY2ODY2IiBzdHJva2U9Im51bGwiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+'),
  url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoLTg5Ljc2MjQgNy4zMzAxNCA1NS4xMjUyKSIgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzEiIGZpbGw9IiNGOEVBRTciIGQ9Im02Mi41NzQ0OSwxMTcuNTIwODZjLTU1LjIyOCwwIC0xMDAsLTQ0Ljc3MiAtMTAwLC0xMDBsMCwxMDBsMTAwLDB6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgogIDxwYXRoIGQ9Im0tMC42Mzc2Niw3LjMxMjI4YzAuMTE5MTksMCAwLjIxNzM3LDAuMDU3OTYgMC40NzY3NiwwLjExOTE5YzAuMjMyLDAuMDU0NzcgMC4yNzMyOSwwLjAzNDkxIDAuMzU3NTcsMC4xMTkxOWMwLjA4NDI4LDAuMDg0MjggMC4zNTc1NywwIDAuNDc2NzYsMGwwLjExOTE5LDBsMC4yMzgzOCwwIiBpZD0ic3ZnXzIiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxwYXRoIGQ9Im0yOC45MjEzNCw2OS4wNTI0NGMwLDAuMTE5MTkgMCwwLjIzODM4IDAsMC4zNTc1N2wwLDAuMTE5MTlsMCwwLjExOTE5IiBpZD0ic3ZnXzMiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNCIgaGVpZ2h0PSIwIiB3aWR0aD0iMS4zMTEwOCIgeT0iNi44MzU1MiIgeD0iLTAuMDQxNzEiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNSIgaGVpZ2h0PSIxLjc4Nzg0IiB3aWR0aD0iMC4xMTkxOSIgeT0iNjguNDU2NSIgeD0iMjguOTIxMzQiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNiIgaGVpZ2h0PSI0Ljg4Njc3IiB3aWR0aD0iMTkuMDcwMzIiIHk9IjUxLjI5MzIxIiB4PSIzNi42Njg2NiIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiA8L2c+Cjwvc3ZnPg=='),
  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='8' width='100%' height='100%' fill='%23F8EAE7'/></svg>");
  -webkit-mask-size: 18px 30px, 20px 30px, calc(100%) calc(100% + 27px);
  -webkit-mask-position: right bottom, left bottom, center top;
  -webkit-mask-repeat: no-repeat;
}

.cy-default-tabs-tagsview {
  background-color: var(--el-color-white);
  border-bottom: 1px solid var(--next-border-color-light);
  width: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 15px;

  .cy-default-tabs-item {
    border-style: solid;
    border-color: transparent;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    white-space: nowrap;

    .el-icon :hover {
      color: white;
      background: var(--el-color-primary);
    }

    &:hover {
      @extend .tags-style-five-svg ;
      @extend .is-active
    }

    &.is-active {
      @extend .tags-style-five-svg ;
      background: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
      z-index: 1;
    }
  }
}
</style>