Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改大屏嵌入路由

Browse Source
This commit is contained in:
GGJ
2024-02-27 16:21:27 +08:00
parent f51acd7623
commit 122c3e2198
6 changed files with 59 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/layouts/admin/components/navBar/tabs.vue
View File

@@ -1,31 +1,31 @@
<template>
<div class='nav-tabs' ref='tabScrollbarRef'>
<div class="nav-tabs" ref="tabScrollbarRef">
<div
v-for='(item, idx) in navTabs.state.tabsView'
@click='onTab(item)'
@contextmenu.prevent='onContextmenu(item, $event)'
class='ba-nav-tab'
v-for="(item, idx) in navTabs.state.tabsView"
@click="onTab(item)"
@contextmenu.prevent="onContextmenu(item, $event)"
class="ba-nav-tab"
:class="navTabs.state.activeIndex == idx ? 'active' : ''"
:ref='tabsRefs.set'
:key='idx'
:ref="tabsRefs.set"
:key="idx"
>
{{ item.meta.title }}
<transition @after-leave='selectNavTab(tabsRefs[navTabs.state.activeIndex])' name='el-fade-in'>
<transition @after-leave="selectNavTab(tabsRefs[navTabs.state.activeIndex])" name="el-fade-in">
<Icon
v-show='navTabs.state.tabsView.length > 1'
class='close-icon'
@click.stop='closeTab(item)'
size='15'
name='el-icon-Close'
v-show="navTabs.state.tabsView.length > 1"
class="close-icon"
@click.stop="closeTab(item)"
size="15"
name="el-icon-Close"
/>
</transition>
</div>
<!-- <div :style='activeBoxStyle' class='nav-tabs-active-box'></div>-->
<!-- <div :style='activeBoxStyle' class='nav-tabs-active-box'></div>-->
</div>
<Contextmenu ref='contextmenuRef' :items='state.contextmenuItems' @contextmenuItemClick='onContextmenuItem' />
<Contextmenu ref="contextmenuRef" :items="state.contextmenuItems" @contextmenuItemClick="onContextmenuItem" />
</template>
<script setup lang='ts'>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter, onBeforeRouteUpdate, type RouteLocationNormalized } from 'vue-router'
import { useConfig } from '@/stores/config'
@@ -85,7 +85,7 @@ const onContextmenu = (menu: RouteLocationNormalized, el: MouseEvent) => {
}
// tab 激活状态切换
const selectNavTab = function(dom: HTMLDivElement) {
const selectNavTab = function (dom: HTMLDivElement) {
if (!dom) {
return false
}
@@ -169,7 +169,7 @@ const onContextmenuItem = async (item: ContextmenuItemClickEmitArg) => {
}
}
const updateTab = function(newRoute: RouteLocationNormalized) {
const updateTab = function (newRoute: RouteLocationNormalized) {
// 添加tab
navTabs.addTab(newRoute)
// 激活当前tab
@@ -181,7 +181,10 @@ const updateTab = function(newRoute: RouteLocationNormalized) {
}
onBeforeRouteUpdate(async to => {
updateTab(to)
updateTab(to)
})
onMounted(() => {
@@ -190,7 +193,7 @@ onMounted(() => {
})
</script>
<style scoped lang='scss'>
<style scoped lang="scss">
.dark {
.close-icon {
color: v-bind('config.getColorVal("headerBarTabColor")') !important;