|
@@ -1,136 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-scrollbar>
|
|
|
- <div class="hc-router-tab-box">
|
|
|
- <div class="hc-router-tab-item" :class="(barRoutes.key === 'home' || barRoutes.key === 'index') ? 'cur' : ''" @click="toHomeClick">首页</div>
|
|
|
- <template v-for="(item, index) in barMenuData" :key="item.key">
|
|
|
- <div
|
|
|
- :class="item.key === barRoutes.key ? 'cur' : ''" class="hc-router-tab-item"
|
|
|
- @click="barMenuClick(item)" @contextmenu.prevent="barMenuContextMenu($event, item, index)"
|
|
|
- >
|
|
|
- <span>{{ item.title }}</span>
|
|
|
- <div class="close-icon" @click.stop="barMenuCloseClick(item, index)">
|
|
|
- <hc-icon name="close" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </el-scrollbar>
|
|
|
- <!-- 右键菜单 -->
|
|
|
- <hc-context-menu ref="contextMenuRef" :datas="menusData" @item-click="handleMenuSelect" />
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import { onMounted, ref, watch } from 'vue'
|
|
|
-import { useRoute, useRouter } from 'vue-router'
|
|
|
-import { getStore, setStore } from 'hc-vue3-ui'
|
|
|
-
|
|
|
-const emit = defineEmits(['load'])
|
|
|
-//初始组合式
|
|
|
-const router = useRouter()
|
|
|
-const useRoutes = useRoute()
|
|
|
-
|
|
|
-//初始变量
|
|
|
-const barMenuData = ref(getStore('bar-menu-datas') || [])
|
|
|
-const barRoutes = ref({ key: '', path: '', title: '', query: null })
|
|
|
-
|
|
|
-//渲染完成
|
|
|
-onMounted(() => {
|
|
|
- const { name, path, meta, query } = useRoutes
|
|
|
- barRoutes.value = { path, key: name, title: meta?.title, query }
|
|
|
- setBarMenuData()
|
|
|
-})
|
|
|
-
|
|
|
-//监听
|
|
|
-watch(() => [
|
|
|
- useRoutes?.name,
|
|
|
- useRoutes?.path,
|
|
|
- useRoutes?.query,
|
|
|
- useRoutes?.meta?.title,
|
|
|
-], ([key, path, query, title]) => {
|
|
|
- barRoutes.value = { path, key, title, query }
|
|
|
- setBarMenuData()
|
|
|
-})
|
|
|
-
|
|
|
-//设置菜单数据
|
|
|
-const setBarMenuData = () => {
|
|
|
- const { key, path, title, query } = barRoutes.value
|
|
|
- if (['home', 'index'].indexOf(key) === -1) {
|
|
|
- const index = barMenuData.value.findIndex(item => item.key === key)
|
|
|
- if (index === -1) {
|
|
|
- barMenuData.value.push({ path, key: key, title, query })
|
|
|
- }
|
|
|
- setStore('bar-menu-datas', barMenuData.value)
|
|
|
- }
|
|
|
- emit('load', barRoutes.value)
|
|
|
-}
|
|
|
-
|
|
|
-//菜单被点击
|
|
|
-const barMenuClick = (item) => {
|
|
|
- const { key } = barRoutes.value
|
|
|
- if (key !== item.key) {
|
|
|
- router.push({ name: item.key, query: item.query })
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//鼠标右键菜单
|
|
|
-const contextMenuRef = ref(null)
|
|
|
-const barItem = ref({})
|
|
|
-const barItemIndex = ref(0)
|
|
|
-const menusData = ref([
|
|
|
- { label: '关闭当前', key: 'close' },
|
|
|
- { label: '关闭所有', key: 'all' },
|
|
|
- { label: '关闭其它', key: 'other' },
|
|
|
-])
|
|
|
-const barMenuContextMenu = (event, item, index) => {
|
|
|
- event.preventDefault()
|
|
|
- barItem.value = item
|
|
|
- barItemIndex.value = index
|
|
|
- contextMenuRef.value?.showMenu(event)
|
|
|
-}
|
|
|
-
|
|
|
-//鼠标右键菜单被点击
|
|
|
-const handleMenuSelect = ({ key }) => {
|
|
|
- if (key === 'close') {
|
|
|
- barMenuCloseClick(barItem.value, barItemIndex.value)
|
|
|
- } else if (key === 'all') {
|
|
|
- barMenuData.value = []
|
|
|
- setStore('bar-menu-datas', [])
|
|
|
- router.push({ name: 'index' })
|
|
|
- } else if (key === 'other') {
|
|
|
- const { key } = barRoutes.value
|
|
|
- barMenuData.value = barMenuData.value.filter(item => item.key === key)
|
|
|
- setStore('bar-menu-datas', barMenuData.value)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//菜单关闭被点击
|
|
|
-const barMenuCloseClick = (item, index) => {
|
|
|
- const total = barMenuData.value.length - 1
|
|
|
- const { key } = barRoutes.value
|
|
|
- barMenuData.value.splice(index, 1)
|
|
|
- if (key === item.key) {
|
|
|
- let items = {}
|
|
|
- const indexs = barMenuData.value.length - 1
|
|
|
- if (total > index) {
|
|
|
- items = barMenuData.value[index]
|
|
|
- } else if (indexs >= 0) {
|
|
|
- items = barMenuData.value[indexs]
|
|
|
- }
|
|
|
- if (indexs < 0) {
|
|
|
- setStore('bar-menu-datas', barMenuData.value)
|
|
|
- router.push({ name: 'index' })
|
|
|
- } else {
|
|
|
- barRoutes.value = items
|
|
|
- setStore('bar-menu-datas', barMenuData.value)
|
|
|
- router.push({ name: items.key, query: items.query })
|
|
|
- }
|
|
|
- } else {
|
|
|
- setStore('bar-menu-datas', barMenuData.value)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//点击了首页
|
|
|
-const toHomeClick = () => {
|
|
|
- router.push({ name: 'index' })
|
|
|
-}
|
|
|
-</script>
|