75 lines
1.7 KiB
Markdown
75 lines
1.7 KiB
Markdown
<cn>
|
|
#### 自定义新增页签触发器
|
|
隐藏默认的页签增加图标，给自定义触发器绑定事件。
|
|
</cn>
|
|
|
|
<us>
|
|
#### Customized trigger of new tab
|
|
Hide default plus icon, and bind event for customized trigger.
|
|
</us>
|
|
|
|
```html
|
|
<template>
|
|
<div>
|
|
<div :style="{ marginBottom: '16px' }">
|
|
<a-button @click="add">ADD</a-button>
|
|
</div>
|
|
<a-tabs
|
|
hideAdd
|
|
v-model="activeKey"
|
|
type="editable-card"
|
|
@edit="onEdit"
|
|
>
|
|
<a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">
|
|
{{pane.content}}
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data () {
|
|
const panes = [
|
|
{ title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
|
|
{ title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
|
|
]
|
|
return {
|
|
activeKey: panes[0].key,
|
|
panes,
|
|
newTabIndex: 0,
|
|
}
|
|
},
|
|
methods: {
|
|
callback (key) {
|
|
console.log(key)
|
|
},
|
|
onEdit (targetKey, action) {
|
|
this[action](targetKey)
|
|
},
|
|
add () {
|
|
const panes = this.panes
|
|
const activeKey = `newTab${this.newTabIndex++}`
|
|
panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey })
|
|
this.panes = panes
|
|
this.activeKey = activeKey
|
|
},
|
|
remove (targetKey) {
|
|
let activeKey = this.activeKey
|
|
let lastIndex
|
|
this.panes.forEach((pane, i) => {
|
|
if (pane.key === targetKey) {
|
|
lastIndex = i - 1
|
|
}
|
|
})
|
|
const panes = this.panes.filter(pane => pane.key !== targetKey)
|
|
if (lastIndex >= 0 && activeKey === targetKey) {
|
|
activeKey = panes[lastIndex].key
|
|
}
|
|
this.panes = panes
|
|
this.activeKey = activeKey
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
``` |