antd vue pro 开启多标签怎么拓展刷新功能

原因是开启多标签之后,所有页面默认都开启缓存了,所有必定要带有这个刷新功能

这个是8999付费版的带有刷新功能
antd vue pro 开启多标签怎么拓展刷新功能

这个是白嫖版,没有这个刷新
antd vue pro 开启多标签怎么拓展刷新功能

自己也研究了它多标签组件里的源码 src\components\MultiTab\MultiTab.vue 不知道怎么拓展有老哥做过这个能提供一下思路吗

<script>

import events from './events'

export default {

name: 'MultiTab',

data () {

return {

fullPathList: [],

pages: [],

activeKey: '',

newTabIndex: 0

}

},

created () {

// bind event

events.$on('open', val => {

if (!val) {

throw new Error(`multi-tab: open tab ${val} err`)

}

this.activeKey = val

}).$on('close', val => {

if (!val) {

this.closeThat(this.activeKey)

return

}

this.closeThat(val)

}).$on('rename', ({ key, name }) => {

console.log('rename', key, name)

try {

const item = this.pages.find(item => item.path === key)

item.meta.customTitle = name

this.$forceUpdate()

} catch (e) {

}

})

this.pages.push(this.$route)

this.fullPathList.push(this.$route.fullPath)

this.selectedLastPath()

},

methods: {

onEdit (targetKey, action) {

this[action](targetKey)

},

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) {

// 判断是否为最后一个标签页,如果是最后一个,则无法被关闭

if (this.fullPathList.length > 1) {

this.remove(e)

} else {

this.$message.info('这是最后一个标签了, 无法被关闭')

}

},

closeLeft (e) {

const currentIndex = this.fullPathList.indexOf(e)

if (currentIndex > 0) {

this.fullPathList.forEach((item, index) => {

if (index < currentIndex) {

this.remove(item)

}

})

} else {

this.$message.info('左侧没有标签')

}

},

closeRight (e) {

const currentIndex = this.fullPathList.indexOf(e)

if (currentIndex < (this.fullPathList.length - 1)) {

this.fullPathList.forEach((item, index) => {

if (index > currentIndex) {

this.remove(item)

}

})

} else {

this.$message.info('右侧没有标签')

}

},

closeAll (e) {

const currentIndex = this.fullPathList.indexOf(e)

this.fullPathList.forEach((item, index) => {

if (index !== currentIndex) {

this.remove(item)

}

})

},

closeMenuClick (key, route) {

this[key](route)

},

renderTabPaneMenu (e) {

return (

<a-menu {...{ on: { click: ({ key, item, domEvent }) => { this.closeMenuClick(key, e) } } }}>

<a-menu-item key="closeThat">关闭当前标签</a-menu-item>

<a-menu-item key="closeRight">关闭右侧</a-menu-item>

<a-menu-item key="closeLeft">关闭左侧</a-menu-item>

<a-menu-item key="closeAll">关闭全部</a-menu-item>

</a-menu>

)

},

// render

renderTabPane (title, keyPath) {

const menu = this.renderTabPaneMenu(keyPath)

return (

<a-dropdown overlay={menu} trigger={['contextmenu']}>

<span style={{ userSelect: 'none' }}>{title}</span>

</a-dropdown>

)

}

},

watch: {

'$route': function (newVal) {

this.activeKey = newVal.fullPath

if (this.fullPathList.indexOf(newVal.fullPath) < 0) {

this.fullPathList.push(newVal.fullPath)

this.pages.push(newVal)

}

},

activeKey: function (newPathKey) {

this.$router.push({ path: newPathKey })

}

},

render () {

const { onEdit, $data: { pages } } = this

const panes = pages.map(page => {

return (

<a-tab-pane

style={{ height: 0 }}

tab={this.renderTabPane(page.meta.customTitle || page.meta.title, page.fullPath)}

key={page.fullPath} closable={pages.length > 1}

>

</a-tab-pane>)

})

return (

<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}

</a-tabs>

</div>

</div>

)

}

}

</script>

以上是 antd vue pro 开启多标签怎么拓展刷新功能 的全部内容, 来源链接: utcz.com/p/937117.html

回到顶部