|
|
@@ -4,42 +4,15 @@
|
|
|
inline-theme-disabled
|
|
|
>
|
|
|
<div class="box">
|
|
|
- <!-- <Head /> -->
|
|
|
- <div class="box-top">
|
|
|
- <n-tabs
|
|
|
- ref="tabsRef"
|
|
|
- v-model:value="currentMenu"
|
|
|
- type="card"
|
|
|
- closable
|
|
|
- size="small"
|
|
|
- :tabs-padding="5"
|
|
|
- addable
|
|
|
- @close="close"
|
|
|
- @add="showAdd = true"
|
|
|
- @update:value="updateScrollBar"
|
|
|
- >
|
|
|
- <template
|
|
|
- v-for="(item, index) in tabs"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <n-tab-pane :name="item.name">
|
|
|
- <template #tab>
|
|
|
- <Icon
|
|
|
- :name="item.icon"
|
|
|
- :size="item.size"
|
|
|
- />
|
|
|
- {{ item.label }}
|
|
|
- </template>
|
|
|
- </n-tab-pane>
|
|
|
- </template>
|
|
|
- </n-tabs>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 弹窗 -->
|
|
|
- <n-modal v-model:show="showAdd">
|
|
|
- <Add @call-back="addBack" />
|
|
|
- </n-modal>
|
|
|
+ <Head
|
|
|
+ v-model:show-add="showAdd"
|
|
|
+ v-model:list="tabs"
|
|
|
+ />
|
|
|
</div>
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <n-modal v-model:show="showAdd">
|
|
|
+ <Add @call-back="addBack" />
|
|
|
+ </n-modal>
|
|
|
</n-config-provider>
|
|
|
</template>
|
|
|
<script setup lang='ts'>
|
|
|
@@ -48,74 +21,53 @@ import Head from '@/components/head.vue'
|
|
|
import Add from '@/components/add.vue'
|
|
|
import { FormData } from '@/components/edit.vue'
|
|
|
|
|
|
-const currentMenu = ref('0')
|
|
|
-const tabsRef = ref()
|
|
|
+const showAdd = ref(false)
|
|
|
const tabs = ref([
|
|
|
{
|
|
|
- name: '0', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
},
|
|
|
{
|
|
|
- name: '1', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'cmd', size: 14
|
|
|
}, {
|
|
|
- name: '2', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
}, {
|
|
|
- name: '3', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
}, {
|
|
|
- name: '4', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
}, {
|
|
|
- name: '5', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
}, {
|
|
|
- name: '6', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
}, {
|
|
|
- name: '7', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
}, {
|
|
|
- name: '8', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
}, {
|
|
|
- name: '9', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
}, {
|
|
|
- name: '10', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
},
|
|
|
{
|
|
|
- name: '11', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
},
|
|
|
{
|
|
|
- name: '12', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
},
|
|
|
{
|
|
|
- name: '13', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
},
|
|
|
{
|
|
|
- name: '14', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
},
|
|
|
{
|
|
|
- name: '15', label: 'Home', icon: 'home', size: 15
|
|
|
+ label: 'Home', icon: 'home', size: 15
|
|
|
}
|
|
|
-])
|
|
|
-const showAdd = ref(false)
|
|
|
-
|
|
|
-function close(name: string) {
|
|
|
- if (name === '0') return
|
|
|
- const id = tabs.value.findIndex((v) => name === v.name)
|
|
|
- tabs.value.splice(id, 1)
|
|
|
- if (currentMenu.value === name) currentMenu.value = tabs.value[id - 1].name
|
|
|
-}
|
|
|
-
|
|
|
-// 更新工具条位置
|
|
|
-function updateScrollBar(params: string) {
|
|
|
- tabsRef.value.xScrollInstRef.scrollTo({ top: 0, left: +params * 110 - 110, behavior: 'smooth' })
|
|
|
- console.log(123, tabsRef.value, +params * 110)
|
|
|
-}
|
|
|
+] as FormData[])
|
|
|
|
|
|
function addBack(params: FormData) {
|
|
|
console.log('双击返回', params)
|
|
|
- tabs.value.push({
|
|
|
- name: `${tabs.value.length + 1}`, label: params.label, icon: 'host', size: 13
|
|
|
- })
|
|
|
- currentMenu.value = tabs.value[tabs.value.length - 1].name
|
|
|
+ tabs.value.push({ ...params })
|
|
|
showAdd.value = false
|
|
|
- setTimeout(() => {
|
|
|
- updateScrollBar(currentMenu.value)
|
|
|
- }, 0)
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
@@ -126,66 +78,5 @@ onMounted(() => {
|
|
|
.box {
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
-
|
|
|
- &-top {
|
|
|
- background: var(--background-color);
|
|
|
- -webkit-app-region: drag;
|
|
|
-
|
|
|
- :deep(.n-tabs) {
|
|
|
- --n-tab-border-radius: 8px;
|
|
|
- --n-tab-gap: 5px;
|
|
|
- --n-tab-text-color: var(--font-color);
|
|
|
- // height: 100%;
|
|
|
- // width: 100%;
|
|
|
- margin: 0 auto;
|
|
|
- -webkit-app-region: no-drag;
|
|
|
- // padding: 0 70px;
|
|
|
- padding-left: 70px;
|
|
|
-
|
|
|
- .n-tabs-tab {
|
|
|
- min-width: 100px;
|
|
|
- text-indent: 5px;
|
|
|
- padding: 3px 5px !important;
|
|
|
- overflow: hidden;
|
|
|
- user-select: none;
|
|
|
-
|
|
|
- &--active {
|
|
|
- position: relative;
|
|
|
- background: var(--background-color) !important;
|
|
|
- color: var(--font-color) !important;
|
|
|
- }
|
|
|
-
|
|
|
- &--addable {
|
|
|
- min-width: auto;
|
|
|
- text-indent: 0;
|
|
|
- }
|
|
|
-
|
|
|
- &-wrapper {
|
|
|
- padding-top: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // .n-tab-pane {
|
|
|
- // height: calc(100% - 34px);
|
|
|
- // padding: 0;
|
|
|
- // }
|
|
|
-
|
|
|
- .n-tabs-pad {
|
|
|
- -webkit-app-region: drag;
|
|
|
- }
|
|
|
-
|
|
|
- .n-tabs-wrapper{
|
|
|
- max-width: 80%;
|
|
|
- }
|
|
|
-
|
|
|
- // .n-tabs-nav-scroll-content {
|
|
|
- // padding-left: 70px;
|
|
|
- // // margin-right: 70px;
|
|
|
- // // min-width: unset;
|
|
|
- // // width: 100%;
|
|
|
- // }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
