修改他不删除后编辑检测监本还存在问题
This commit is contained in:
@@ -1,12 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class='tabs-box'>
|
<div class="tabs-box">
|
||||||
<div class='tabs-menu'>
|
<div class="tabs-menu">
|
||||||
<el-tabs v-model='tabsMenuValue' type='card' @tab-click='tabClick' @tab-remove='tabRemove'>
|
<el-tabs v-model="tabsMenuValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
|
||||||
<el-tab-pane v-for='item in tabsMenuList' :key='item.path' :label='item.title' :name='item.path'
|
<el-tab-pane
|
||||||
:closable='item.close'>
|
v-for="item in tabsMenuList"
|
||||||
|
:key="item.path"
|
||||||
|
:label="item.title"
|
||||||
|
:name="item.path"
|
||||||
|
:closable="item.close"
|
||||||
|
>
|
||||||
<template #label>
|
<template #label>
|
||||||
<el-icon v-show='item.icon && tabsIcon' class='tabs-icon'>
|
<el-icon v-show="item.icon && tabsIcon" class="tabs-icon">
|
||||||
<component :is='item.icon'></component>
|
<component :is="item.icon"></component>
|
||||||
</el-icon>
|
</el-icon>
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</template>
|
</template>
|
||||||
@@ -17,7 +22,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang='ts'>
|
<script setup lang="ts">
|
||||||
import Sortable from 'sortablejs'
|
import Sortable from 'sortablejs'
|
||||||
import { ref, computed, watch, onMounted } from 'vue'
|
import { ref, computed, watch, onMounted } from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
@@ -42,15 +47,14 @@ onMounted(() => {
|
|||||||
initTabs()
|
initTabs()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
// 监听路由的变化(防止浏览器后退/前进不变化 tabsMenuValue)
|
// 监听路由的变化(防止浏览器后退/前进不变化 tabsMenuValue)
|
||||||
watch(
|
watch(
|
||||||
() => route.fullPath,
|
() => route.fullPath,
|
||||||
() => {
|
() => {
|
||||||
if (route.meta.isFull) return
|
if (route.meta.isFull) return
|
||||||
if (route.meta.hideTab){
|
if (route.meta.hideTab) {
|
||||||
tabsMenuValue.value = route.meta.parentPath as string
|
tabsMenuValue.value = route.meta.parentPath as string
|
||||||
}else{
|
} else {
|
||||||
tabsMenuValue.value = route.fullPath
|
tabsMenuValue.value = route.fullPath
|
||||||
const tabsParams = {
|
const tabsParams = {
|
||||||
icon: route.meta.icon as string,
|
icon: route.meta.icon as string,
|
||||||
@@ -58,12 +62,12 @@ watch(
|
|||||||
path: route.fullPath,
|
path: route.fullPath,
|
||||||
name: route.name as string,
|
name: route.name as string,
|
||||||
close: !route.meta.isAffix,
|
close: !route.meta.isAffix,
|
||||||
isKeepAlive: route.meta.isKeepAlive as boolean,
|
isKeepAlive: route.meta.isKeepAlive as boolean
|
||||||
}
|
}
|
||||||
tabStore.addTabs(tabsParams)
|
tabStore.addTabs(tabsParams)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true },
|
{ immediate: true }
|
||||||
)
|
)
|
||||||
|
|
||||||
// 初始化需要固定的 tabs
|
// 初始化需要固定的 tabs
|
||||||
@@ -77,7 +81,7 @@ const initTabs = () => {
|
|||||||
name: item.name,
|
name: item.name,
|
||||||
close: !item.meta.isAffix,
|
close: !item.meta.isAffix,
|
||||||
isKeepAlive: item.meta.isKeepAlive,
|
isKeepAlive: item.meta.isKeepAlive,
|
||||||
unshift:true
|
unshift: true
|
||||||
}
|
}
|
||||||
tabStore.addTabs(tabsParams)
|
tabStore.addTabs(tabsParams)
|
||||||
}
|
}
|
||||||
@@ -94,7 +98,7 @@ const tabsDrop = () => {
|
|||||||
const currRow = tabsList.splice(oldIndex as number, 1)[0]
|
const currRow = tabsList.splice(oldIndex as number, 1)[0]
|
||||||
tabsList.splice(newIndex as number, 0, currRow)
|
tabsList.splice(newIndex as number, 0, currRow)
|
||||||
tabStore.setTabs(tabsList)
|
tabStore.setTabs(tabsList)
|
||||||
},
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -107,10 +111,12 @@ const tabClick = (tabItem: TabsPaneContext) => {
|
|||||||
|
|
||||||
// Remove Tab
|
// Remove Tab
|
||||||
const tabRemove = (fullPath: TabPaneName) => {
|
const tabRemove = (fullPath: TabPaneName) => {
|
||||||
tabStore.removeTabs(fullPath as string, fullPath == route.fullPath)
|
|
||||||
|
|
||||||
|
tabStore.removeTabs(fullPath as string, fullPath == route.fullPath || '/machine/testScriptAdd' == route.fullPath)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang='scss'>
|
<style scoped lang="scss">
|
||||||
@import "./index.scss";
|
@import './index.scss';
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user