Tabs add prop beforeRemove, close #4379
This commit is contained in:
梁灏
parent
cec470ebd5
commit
753720d9bd
2 changed files with 34 additions and 196 deletions
|
|
@ -1,77 +1,5 @@
|
||||||
<!--<template>-->
|
<template>
|
||||||
<!--<Tabs value="name1" :animated="false">-->
|
<Tabs type="card" closable @on-tab-remove="handleTabRemove" :beforeRemove="handleBeforeRemove">
|
||||||
<!--<Tab-pane label="test" name="test">-->
|
|
||||||
<!--<Tabs type="card" v-bind:animated="true">-->
|
|
||||||
<!--<Tab-pane label="标签2一">标签2一的内容</Tab-pane>-->
|
|
||||||
<!--<Tab-pane label="标签2二">标签2二的内容</Tab-pane>-->
|
|
||||||
<!--<Tab-pane label="标签2三">标签2三的内容</Tab-pane>-->
|
|
||||||
<!--</Tabs>-->
|
|
||||||
<!--</Tab-pane>-->
|
|
||||||
<!--<Tab-pane :label="label1" name="name1">-->
|
|
||||||
<!--<Table :columns="columns1" :data="data1"></Table>-->
|
|
||||||
<!--</Tab-pane>-->
|
|
||||||
<!--<Tab-pane label="标签二" name="name2">-->
|
|
||||||
<!--<Table :columns="columns1" :data="data1"></Table>-->
|
|
||||||
<!--</Tab-pane>-->
|
|
||||||
<!--<Tab-pane label="标签三" name="name3">-->
|
|
||||||
<!--<Table :columns="columns1" :data="data1"></Table>-->
|
|
||||||
<!--</Tab-pane>-->
|
|
||||||
<!--</Tabs>-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<script>-->
|
|
||||||
<!--export default {-->
|
|
||||||
<!--data () {-->
|
|
||||||
<!--return {-->
|
|
||||||
<!--label1: (h) => {-->
|
|
||||||
<!--return h('div', [-->
|
|
||||||
<!--h('span', '标签一'),-->
|
|
||||||
<!--h('Button', 'button')-->
|
|
||||||
<!--]);-->
|
|
||||||
<!--},-->
|
|
||||||
<!--columns1: [-->
|
|
||||||
<!--{-->
|
|
||||||
<!--title: '姓名',-->
|
|
||||||
<!--key: 'name'-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--title: '年龄',-->
|
|
||||||
<!--key: 'age'-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--title: '地址',-->
|
|
||||||
<!--key: 'address'-->
|
|
||||||
<!--}-->
|
|
||||||
<!--],-->
|
|
||||||
<!--data1: [-->
|
|
||||||
<!--{-->
|
|
||||||
<!--name: '王小明',-->
|
|
||||||
<!--age: 18,-->
|
|
||||||
<!--address: '北京市朝阳区芍药居'-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--name: '张小刚',-->
|
|
||||||
<!--age: 25,-->
|
|
||||||
<!--address: '北京市海淀区西二旗'-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--name: '李小红',-->
|
|
||||||
<!--age: 30,-->
|
|
||||||
<!--address: '上海市浦东新区世纪大道'-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--name: '周小伟',-->
|
|
||||||
<!--age: 26,-->
|
|
||||||
<!--address: '深圳市南山区深南大道'-->
|
|
||||||
<!--}-->
|
|
||||||
<!--]-->
|
|
||||||
<!--}-->
|
|
||||||
<!--}-->
|
|
||||||
<!--}-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <template>
|
|
||||||
<Tabs type="card" closable @on-tab-remove="handleTabRemove">
|
|
||||||
<TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
|
<TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
|
||||||
<TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
|
<TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
|
||||||
<TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
|
<TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
|
||||||
|
|
@ -89,129 +17,23 @@
|
||||||
methods: {
|
methods: {
|
||||||
handleTabRemove (name) {
|
handleTabRemove (name) {
|
||||||
this['tab' + name] = false;
|
this['tab' + name] = false;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script> -->
|
|
||||||
|
|
||||||
<!--<template>-->
|
|
||||||
<!--<div>-->
|
|
||||||
<!--<Button type="ghost" @click="toFirst" size="small">to first</Button>-->
|
|
||||||
<!--<Button type="ghost" @click="toLast" size="small">to last</Button>-->
|
|
||||||
<!--<Tabs type="card" :animated="animated" v-model="activeTab">-->
|
|
||||||
<!--<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab" :name="tab+''" closable>标签{{ tab }}</TabPane>-->
|
|
||||||
<!--<div slot="extra">-->
|
|
||||||
<!--<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</Tabs>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<script>-->
|
|
||||||
<!--export default {-->
|
|
||||||
<!--data () {-->
|
|
||||||
<!--return {-->
|
|
||||||
<!--tabs: 2,-->
|
|
||||||
<!--activeTab:"2",-->
|
|
||||||
<!--animated:true-->
|
|
||||||
<!--}-->
|
|
||||||
<!--},-->
|
|
||||||
<!--methods: {-->
|
|
||||||
<!--handleTabsAdd () {-->
|
|
||||||
<!--this.tabs ++;-->
|
|
||||||
<!--this.activeTab = this.tabs + '';-->
|
|
||||||
<!--},-->
|
|
||||||
<!--toFirst () {-->
|
|
||||||
<!--this.activeTab = '1';-->
|
|
||||||
<!--},-->
|
|
||||||
<!--toLast () {-->
|
|
||||||
<!--this.activeTab = this.tabs+'';-->
|
|
||||||
<!--}-->
|
|
||||||
<!--}-->
|
|
||||||
<!--}-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
||||||
<!--<template>-->
|
|
||||||
<!--<div>-->
|
|
||||||
<!--<Tabs type="card">-->
|
|
||||||
<!--<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>-->
|
|
||||||
<!--</Tabs>-->
|
|
||||||
<!--<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>-->
|
|
||||||
<!--<Button type="ghost" @click="handleTabsMin" size="small">减少</Button>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<script>-->
|
|
||||||
<!--export default {-->
|
|
||||||
<!--data () {-->
|
|
||||||
<!--return {-->
|
|
||||||
<!--tabs: 2-->
|
|
||||||
<!--}-->
|
|
||||||
<!--},-->
|
|
||||||
<!--methods: {-->
|
|
||||||
<!--handleTabsAdd () {-->
|
|
||||||
<!--this.tabs ++;-->
|
|
||||||
<!--},-->
|
|
||||||
<!--handleTabsMin () {-->
|
|
||||||
<!--this.tabs --;-->
|
|
||||||
<!--}-->
|
|
||||||
<!--}-->
|
|
||||||
<!--}-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<i-input></i-input>
|
|
||||||
<Button type="ghost" @click="handleTabsAdd" size="small" slot="extra">增加</Button>
|
|
||||||
|
|
||||||
<hr style="margin: 10px 0;">
|
|
||||||
<Tabs type="card">
|
|
||||||
<TabPane v-for="tab in tabs" :key="tab" :label="'Tab' + tab">
|
|
||||||
<div>
|
|
||||||
<h3>Some text...</h3>
|
|
||||||
<i-button>Some focusable content...{{ tab }}</i-button>
|
|
||||||
</div>
|
|
||||||
</TabPane>
|
|
||||||
</Tabs>
|
|
||||||
<Tabs type="card">
|
|
||||||
<TabPane label="标签一">标签一的内容</TabPane>
|
|
||||||
<TabPane label="标签二" disabled>标签二的内容</TabPane>
|
|
||||||
<TabPane label="标签三">标签三的内容</TabPane>
|
|
||||||
</Tabs>
|
|
||||||
<tabs v-model="name" type="card" @on-click="handleClick">
|
|
||||||
<tab-pane name="a" label="标签一">
|
|
||||||
<div>1</div>
|
|
||||||
</tab-pane>
|
|
||||||
<tab-pane name="b" label="标签二">
|
|
||||||
<div>2</div>
|
|
||||||
</tab-pane>
|
|
||||||
<tab-pane name="c" label="标签三">
|
|
||||||
<div>3</div>
|
|
||||||
</tab-pane>
|
|
||||||
<tab-pane name="d" label="标签四">
|
|
||||||
<div>4</div>
|
|
||||||
</tab-pane>
|
|
||||||
<tab-pane name="e" label="标签五">
|
|
||||||
<div>5</div>
|
|
||||||
</tab-pane>
|
|
||||||
</tabs>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
tabs: 2,
|
|
||||||
name: 'b',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleTabsAdd () {
|
|
||||||
this.tabs ++;
|
|
||||||
},
|
},
|
||||||
handleClick (name) {
|
handleBeforeRemove (index) {
|
||||||
console.log(name);
|
console.log(index);
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this.$Modal.confirm({
|
||||||
|
title: 'Title',
|
||||||
|
content: '<p>Content of dialog</p><p>Content of dialog</p>',
|
||||||
|
onOk: () => {
|
||||||
|
resolve();
|
||||||
|
},
|
||||||
|
onCancel: () => {
|
||||||
|
reject();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -91,7 +91,8 @@
|
||||||
closable: {
|
closable: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
}
|
},
|
||||||
|
beforeRemove: Function,
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -247,6 +248,21 @@
|
||||||
this.handleChange(index);
|
this.handleChange(index);
|
||||||
},
|
},
|
||||||
handleRemove (index) {
|
handleRemove (index) {
|
||||||
|
if (!this.beforeRemove) {
|
||||||
|
return this.handleRemoveTab(index);
|
||||||
|
}
|
||||||
|
|
||||||
|
const before = this.beforeRemove(index);
|
||||||
|
|
||||||
|
if (before && before.then) {
|
||||||
|
before.then(() => {
|
||||||
|
this.handleRemoveTab(index);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.handleRemoveTab(index);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleRemoveTab (index) {
|
||||||
const tabs = this.getTabs();
|
const tabs = this.getTabs();
|
||||||
const tab = tabs[index];
|
const tab = tabs[index];
|
||||||
tab.$destroy();
|
tab.$destroy();
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue