mirror of
https://github.com/zclzone/vue-naive-admin.git
synced 2025-05-01 14:49:00 +08:00
100 lines
2.2 KiB
Vue
100 lines
2.2 KiB
Vue
<!--------------------------------
|
|
- @Author: Ronnie Zhang
|
|
- @LastEditor: Ronnie Zhang
|
|
- @LastEditTime: 2023/12/16 18:50:54
|
|
- @Email: zclzone@outlook.com
|
|
- Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
|
|
--------------------------------->
|
|
|
|
<template>
|
|
<div id="top-tab">
|
|
<n-tabs
|
|
:value="tabStore.activeTab"
|
|
:closable="tabStore.tabs.length > 1"
|
|
type="card"
|
|
@close="(path) => tabStore.removeTab(path)"
|
|
>
|
|
<n-tab
|
|
v-for="item in tabStore.tabs"
|
|
:key="item.path"
|
|
:name="item.path"
|
|
@click="handleItemClick(item.path)"
|
|
@contextmenu.prevent="handleContextMenu($event, item)"
|
|
>
|
|
{{ item.title }}
|
|
</n-tab>
|
|
</n-tabs>
|
|
|
|
<ContextMenu
|
|
v-if="contextMenuOption.show"
|
|
v-model:show="contextMenuOption.show"
|
|
:current-path="contextMenuOption.currentPath"
|
|
:x="contextMenuOption.x"
|
|
:y="contextMenuOption.y"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useTabStore } from '@/store'
|
|
import ContextMenu from './ContextMenu.vue'
|
|
|
|
const router = useRouter()
|
|
const tabStore = useTabStore()
|
|
|
|
const contextMenuOption = reactive({
|
|
show: false,
|
|
x: 0,
|
|
y: 0,
|
|
currentPath: '',
|
|
})
|
|
|
|
function handleItemClick(path) {
|
|
tabStore.setActiveTab(path)
|
|
router.push(path)
|
|
}
|
|
|
|
function showContextMenu() {
|
|
contextMenuOption.show = true
|
|
}
|
|
function hideContextMenu() {
|
|
contextMenuOption.show = false
|
|
}
|
|
function setContextMenu(x, y, currentPath) {
|
|
Object.assign(contextMenuOption, { x, y, currentPath })
|
|
}
|
|
|
|
// 右击菜单
|
|
async function handleContextMenu(e, tagItem) {
|
|
const { clientX, clientY } = e
|
|
hideContextMenu()
|
|
setContextMenu(clientX, clientY, tagItem.path)
|
|
await nextTick()
|
|
showContextMenu()
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.n-tabs) {
|
|
.n-tabs-tab {
|
|
padding-left: 16px;
|
|
height: 36px;
|
|
background: transparent !important;
|
|
border-radius: 4px !important;
|
|
margin-right: 4px;
|
|
&:hover {
|
|
border: 1px solid rgb(var(--primary-color)) !important;
|
|
}
|
|
}
|
|
.n-tabs-tab--active {
|
|
border: 1px solid rgb(var(--primary-color)) !important;
|
|
background-color: rgba(var(--primary-color), 0.1) !important;
|
|
}
|
|
.n-tabs-pad,
|
|
.n-tabs-tab-pad,
|
|
.n-tabs-scroll-padding {
|
|
border: none !important;
|
|
}
|
|
}
|
|
</style>
|