inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
commit | author | age
9bcb19 1 <script>
I 2 import events from './events'
3
4 export default {
5   name: 'MultiTab',
6   data () {
7     return {
8       fullPathList: [],
9       pages: [],
10       activeKey: '',
11       newTabIndex: 0
12     }
13   },
14   created () {
15     // bind event
16     events.$on('open', val => {
17       if (!val) {
18         throw new Error(`multi-tab: open tab ${val} err`)
19       }
20       this.activeKey = val
21     }).$on('close', val => {
22       if (!val) {
23         this.closeThat(this.activeKey)
24         return
25       }
26       this.closeThat(val)
27     }).$on('rename', ({ key, name }) => {
28       console.log('rename', key, name)
29       try {
30         const item = this.pages.find(item => item.path === key)
31         item.meta.customTitle = name
32         this.$forceUpdate()
33       } catch (e) {
34       }
35     })
36
37     this.pages.push(this.$route)
38     this.fullPathList.push(this.$route.fullPath)
39     this.selectedLastPath()
40   },
41   methods: {
42     onEdit (targetKey, action) {
43       this[action](targetKey)
44     },
45     remove (targetKey) {
46       this.pages = this.pages.filter(page => page.fullPath !== targetKey)
47       this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
48       // 判断当前标签是否关闭,若关闭则跳转到最后一个还存在的标签页
49       if (!this.fullPathList.includes(this.activeKey)) {
50         this.selectedLastPath()
51       }
52     },
53     selectedLastPath () {
54       this.activeKey = this.fullPathList[this.fullPathList.length - 1]
55     },
56
57     // content menu
58     closeThat (e) {
59       // 判断是否为最后一个标签页,如果是最后一个,则无法被关闭
60       if (this.fullPathList.length > 1) {
61         this.remove(e)
62       } else {
63         this.$message.info('这是最后一个标签了, 无法被关闭')
64       }
65     },
66     closeLeft (e) {
67       const currentIndex = this.fullPathList.indexOf(e)
68       if (currentIndex > 0) {
69         this.fullPathList.forEach((item, index) => {
70           if (index < currentIndex) {
71             this.remove(item)
72           }
73         })
74       } else {
75         this.$message.info('左侧没有标签')
76       }
77     },
78     closeRight (e) {
79       const currentIndex = this.fullPathList.indexOf(e)
80       if (currentIndex < (this.fullPathList.length - 1)) {
81         this.fullPathList.forEach((item, index) => {
82           if (index > currentIndex) {
83             this.remove(item)
84           }
85         })
86       } else {
87         this.$message.info('右侧没有标签')
88       }
89     },
90     closeAll (e) {
91       const currentIndex = this.fullPathList.indexOf(e)
92       this.fullPathList.forEach((item, index) => {
93         if (index !== currentIndex) {
94           this.remove(item)
95         }
96       })
97     },
98     closeMenuClick (key, route) {
99       this[key](route)
100     },
101     renderTabPaneMenu (e) {
102       return (
103         <a-menu {...{ on: { click: ({ key, item, domEvent }) => { this.closeMenuClick(key, e) } } }}>
104           <a-menu-item key="closeThat">关闭当前标签</a-menu-item>
105           <a-menu-item key="closeRight">关闭右侧</a-menu-item>
106           <a-menu-item key="closeLeft">关闭左侧</a-menu-item>
107           <a-menu-item key="closeAll">关闭全部</a-menu-item>
108         </a-menu>
109       )
110     },
111     // render
112     renderTabPane (title, keyPath) {
113       const menu = this.renderTabPaneMenu(keyPath)
114
115       return (
116         <a-dropdown overlay={menu} trigger={['contextmenu']}>
117           <span style={{ userSelect: 'none' }}>{ title }</span>
118         </a-dropdown>
119       )
120     }
121   },
122   watch: {
123     '$route': function (newVal) {
124       this.activeKey = newVal.fullPath
125       if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
126         this.fullPathList.push(newVal.fullPath)
127         this.pages.push(newVal)
128       }
129     },
130     activeKey: function (newPathKey) {
131       this.$router.push({ path: newPathKey })
132     }
133   },
134   render () {
135     const { onEdit, $data: { pages } } = this
136     const panes = pages.map(page => {
137       return (
138         <a-tab-pane
139           style={{ height: 0, background: '#8999ee', color: '#899ee' }}
140           tab={this.renderTabPane(page.meta.customTitle || page.meta.title, page.fullPath)}
141           key={page.fullPath} closable={pages.length > 1}
142         >
143         </a-tab-pane>)
144     })
145
146     return (
147       <div class="ant-pro-multi-tab">
148         <div class="ant-pro-multi-tab-wrapper">
149           <a-tabs
150             hideAdd
151             tabBarGutter={-1}
152             type={'editable-card'}
153             v-model={this.activeKey}
154             tabBarStyle={{ background: '#FFF', margin: 0, paddingLeft: '0px', paddingTop: '0px' }}
155             {...{ on: { edit: onEdit } }}>
156             {panes}
157           </a-tabs>
158         </div>
159       </div>
160     )
161   }
162 }
163 </script>