Browse Source

tags menu

master
zhangtao 2 years ago
parent
commit
c88d526db9
3 changed files with 45 additions and 23 deletions
  1. +1
    -1
      mock/system/router.js
  2. +40
    -20
      src/layout/components/Tags/index.vue
  3. +4
    -2
      src/layout/index.vue

+ 1
- 1
mock/system/router.js View File

@@ -21,7 +21,7 @@ const asyncRoutes = [
component: 'views/system/user/index',
name: 'SystemUser',
meta: {
title: '菜单管理'
title: '用户管理'
}
},
{

+ 40
- 20
src/layout/components/Tags/index.vue View File

@@ -18,7 +18,7 @@
<div
:id="`tag${element.fullPath.split('/').join('\/')}`"
class="tabs-card-scroll-item"
:class="{ 'active-item': activeKey === element.path }"
:class="{ 'active-item': state.activeKey === element.path }"
@click.stop="goPage(element)"
@contextmenu="handleContextMenu($event, element)"
>
@@ -42,15 +42,18 @@ import {
CloseOutlined
} from '@vicons/antd'
import Draggable from 'vuedraggable'
import { reactive, computed, toRaw } from 'vue'
import { reactive, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTagsMenuStore } from '@/store/modules/tagsMenu.js'
import { useSettingStore } from '@/store/modules/setting.js'
import { getTags, setTags } from '@/utils/tags.js'
import { isString } from '@/utils/is.js'

/* 获取路由器 */
const route = useRoute()
const router = useRouter()
const { push, replace } = router

const tagsMenuStore = useTagsMenuStore()
const settingStore = useSettingStore()
const tabsList = computed(() => tagsMenuStore.tabsList)
@@ -82,6 +85,18 @@ const state = reactive({
scrollable: false
})

watch(
() => route.fullPath,
(to) => {
console.log('to', to)
// if (whiteList.includes(route.name)) return
state.activeKey = to
tagsMenuStore.addTabs(getSimpleRoute(route))
// updateNavScroll(true)
},
{ immediate: true }
)

/**
* @description:
* @param { Object } route
@@ -119,10 +134,10 @@ function scrollNext() {
* @return {*}
*/
function goPage(e) {
// const { fullPath } = e
// if (fullPath === route.fullPath) return
// state.activeKey = fullPath
// go(e, true)
const { fullPath } = e
if (fullPath === route.fullPath) return
state.activeKey = fullPath
go(e, true)
}
/**
* @description: 删除项
@@ -149,6 +164,18 @@ function handleContextMenu(e, item) {
// })
}

function go(opt, isReplace = false) {
if (!opt) {
return
}
if (isString(opt)) {
isReplace ? replace(opt).catch(e => console.log(e)) : push(opt).catch(e => console.log(e))
} else {
const o = opt
isReplace ? replace(o).catch(e => console.log(e)) : push(o).catch(e => console.log(e))
}
}

</script>
<style scoped lang='scss'>
.tabs-view {
@@ -156,6 +183,7 @@ function handleContextMenu(e, item) {
padding: 6px 0;
display: flex;
transition: all 0.2s ease-in-out;
background: #f5f7f9;
.tabs-view-main {
height: 32px;
display: flex;
@@ -189,9 +217,9 @@ function handleContextMenu(e, item) {
.tabs-card-scroll {
white-space: nowrap;
overflow: hidden;
&-item {
background: v-bind(getCardColor);
color: v-bind(getBaseColor);
.tabs-card-scroll-item {
background: #ffffff;
// color: v-bind('tagsMenuSetting.color');
height: 32px;
padding: 6px 16px 4px;
border-radius: 3px;
@@ -200,16 +228,13 @@ function handleContextMenu(e, item) {
display: inline-block;
position: relative;
flex: 0 0 auto;

span {
float: left;
vertical-align: middle;
}

&:hover {
color: #515a6e;
}

.n-icon {
height: 22px;
width: 21px;
@@ -218,20 +243,18 @@ function handleContextMenu(e, item) {
vertical-align: middle;
text-align: center;
color: #808695;

&:hover {
color: #515a6e !important;
}

svg {
height: 21px;
display: inline-block;
}
}
&.active-item {
color: #2d8cf0;
}
}
// .active-item {
// color: v-bind(getAppTheme);
// }
}
}
}
@@ -244,7 +267,4 @@ function handleContextMenu(e, item) {
left: 200px;
}

.tabs-view-default-background {
background: #f5f7f9;
}
</style>

+ 4
- 2
src/layout/index.vue View File

@@ -17,7 +17,7 @@
<n-layout>
<Header />
<Tags v-if="tagsMenuSetting.show" />
<n-layout class="layout__content">
<n-layout class="layout__content" :class="{'layout__content--fix': tagsMenuSetting.fixed }">
<router-view />
</n-layout>
</n-layout>
@@ -39,5 +39,7 @@ const tagsMenuSetting = computed(() => settingStore.getTagsMenuSetting)
</script>

<style lang="scss" scoped>

.layout__content--fix{
padding-top: 44px;
}
</style>

Loading…
Cancel
Save