|
|
|
|
@ -24,43 +24,58 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
// 组件名称
|
|
|
|
|
name: 'MultiTab',
|
|
|
|
|
|
|
|
|
|
// 组件的初始数据
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
fullPathList: [],
|
|
|
|
|
pages: [],
|
|
|
|
|
activeKey: '',
|
|
|
|
|
newTabIndex: 0
|
|
|
|
|
fullPathList: [], // 存储所有标签页的完整路径
|
|
|
|
|
pages: [], // 存储所有Vue路由对象
|
|
|
|
|
activeKey: '', // 当前激活的标签页的key
|
|
|
|
|
newTabIndex: 0 // 新标签页的索引（在这段代码中未使用）
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 组件创建后执行的逻辑
|
|
|
|
|
created () {
|
|
|
|
|
// 初始化时将当前路由添加到pages和fullPathList中
|
|
|
|
|
this.pages.push(this.$route)
|
|
|
|
|
this.fullPathList.push(this.$route.fullPath)
|
|
|
|
|
// 选择最后一个路径作为当前激活的路径
|
|
|
|
|
this.selectedLastPath()
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
// 调用编辑方法，根据action参数执行添加或删除操作
|
|
|
|
|
onEdit (targetKey, action) {
|
|
|
|
|
this[action](targetKey)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 从pages和fullPathList中移除指定的标签页
|
|
|
|
|
remove (targetKey) {
|
|
|
|
|
// 过滤掉要移除的标签页
|
|
|
|
|
this.pages = this.pages.filter(page => page.fullPath !== targetKey)
|
|
|
|
|
this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
|
|
|
|
|
// 判断当前标签是否关闭，若关闭则跳转到最后一个还存在的标签页
|
|
|
|
|
// 如果当前激活的标签页被关闭，则跳转到最后一个还存在的标签页
|
|
|
|
|
if (!this.fullPathList.includes(this.activeKey)) {
|
|
|
|
|
this.selectedLastPath()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 选择最后一个标签页作为当前激活的标签页
|
|
|
|
|
selectedLastPath () {
|
|
|
|
|
this.activeKey = this.fullPathList[this.fullPathList.length - 1]
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// content menu
|
|
|
|
|
// 右键菜单中的关闭当前标签功能
|
|
|
|
|
closeThat (e) {
|
|
|
|
|
this.remove(e)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 右键菜单中的关闭左侧所有标签功能
|
|
|
|
|
closeLeft (e) {
|
|
|
|
|
const currentIndex = this.fullPathList.indexOf(e)
|
|
|
|
|
if (currentIndex > 0) {
|
|
|
|
|
@ -73,6 +88,8 @@ export default {
|
|
|
|
|
this.$message.info('左侧没有标签')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 右键菜单中的关闭右侧所有标签功能
|
|
|
|
|
closeRight (e) {
|
|
|
|
|
const currentIndex = this.fullPathList.indexOf(e)
|
|
|
|
|
if (currentIndex < (this.fullPathList.length - 1)) {
|
|
|
|
|
@ -85,6 +102,8 @@ export default {
|
|
|
|
|
this.$message.info('右侧没有标签')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 右键菜单中的关闭全部标签（除了当前标签）功能
|
|
|
|
|
closeAll (e) {
|
|
|
|
|
const currentIndex = this.fullPathList.indexOf(e)
|
|
|
|
|
this.fullPathList.forEach((item, index) => {
|
|
|
|
|
@ -93,6 +112,8 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 右键菜单点击事件处理函数
|
|
|
|
|
closeMenuClick ({ key, item, domEvent }) {
|
|
|
|
|
const vkey = domEvent.target.getAttribute('data-vkey')
|
|
|
|
|
switch (key) {
|
|
|
|
|
@ -111,6 +132,8 @@ export default {
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 渲染右键菜单
|
|
|
|
|
renderTabPaneMenu (e) {
|
|
|
|
|
return (
|
|
|
|
|
<a-menu {...{ on: { click: this.closeMenuClick } }}>
|
|
|
|
|
@ -121,7 +144,8 @@ export default {
|
|
|
|
|
</a-menu>
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
// render
|
|
|
|
|
|
|
|
|
|
// 渲染标签页及其右键菜单
|
|
|
|
|
renderTabPane (title, keyPath) {
|
|
|
|
|
const menu = this.renderTabPaneMenu(keyPath)
|
|
|
|
|
|
|
|
|
|
@ -132,18 +156,26 @@ export default {
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 监听路由变化
|
|
|
|
|
watch: {
|
|
|
|
|
'$route': function (newVal) {
|
|
|
|
|
// 更新当前激活的标签页
|
|
|
|
|
this.activeKey = newVal.fullPath
|
|
|
|
|
// 如果新路由不在fullPathList中，则添加它及其对应的路由对象
|
|
|
|
|
if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
|
|
|
|
|
this.fullPathList.push(newVal.fullPath)
|
|
|
|
|
this.pages.push(newVal)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 监听activeKey的变化，如果变化则导航到新的路径
|
|
|
|
|
activeKey: function (newPathKey) {
|
|
|
|
|
this.$router.push({ path: newPathKey })
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 渲染组件
|
|
|
|
|
render () {
|
|
|
|
|
const { onEdit, $data: { pages } } = this
|
|
|
|
|
const panes = pages.map(page => {
|
|
|
|
|
@ -160,16 +192,16 @@ export default {
|
|
|
|
|
<div class="ant-pro-multi-tab">
|
|
|
|
|
<div class="ant-pro-multi-tab-wrapper">
|
|
|
|
|
<a-tabs
|
|
|
|
|
hideAdd
|
|
|
|
|
type={'editable-card'}
|
|
|
|
|
v-model={this.activeKey}
|
|
|
|
|
tabBarStyle={{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }}
|
|
|
|
|
{...{ on: { edit: onEdit } }}>
|
|
|
|
|
{panes}
|
|
|
|
|
hideAdd // 隐藏添加按钮
|
|
|
|
|
type={'editable-card'} // 标签页的类型为可编辑卡片
|
|
|
|
|
v-model={this.activeKey} // 绑定当前激活的标签页
|
|
|
|
|
tabBarStyle={{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }} // 自定义标签栏的样式
|
|
|
|
|
{...{ on: { edit: onEdit } }}> // 监听编辑事件
|
|
|
|
|
{panes} // 渲染所有的标签页
|
|
|
|
|
</a-tabs>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</script>
|
