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>-->
|
||||
<!--<Tabs value="name1" :animated="false">-->
|
||||
<!--<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">
|
||||
<template>
|
||||
<Tabs type="card" closable @on-tab-remove="handleTabRemove" :beforeRemove="handleBeforeRemove">
|
||||
<TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
|
||||
<TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
|
||||
<TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
|
||||
|
|
@ -89,129 +17,23 @@
|
|||
methods: {
|
||||
handleTabRemove (name) {
|
||||
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 ++;
|
||||
handleBeforeRemove (index) {
|
||||
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();
|
||||
},
|
||||
handleClick (name) {
|
||||
console.log(name);
|
||||
onCancel: () => {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -91,7 +91,8 @@
|
|||
closable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
beforeRemove: Function,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -247,6 +248,21 @@
|
|||
this.handleChange(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 tab = tabs[index];
|
||||
tab.$destroy();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue