From 753720d9bd8e8583b92a70620a04bde2c34e92c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Wed, 29 Aug 2018 14:37:45 +0800
Subject: [PATCH] Tabs add prop beforeRemove, close #4379

---
 examples/routers/tabs.vue    | 212 +++--------------------------------
 src/components/tabs/tabs.vue |  18 ++-
 2 files changed, 34 insertions(+), 196 deletions(-)

diff --git a/examples/routers/tabs.vue b/examples/routers/tabs.vue
index fae815b5..083324e0 100644
--- a/examples/routers/tabs.vue
+++ b/examples/routers/tabs.vue
@@ -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 &#45;&#45;;-->
-            <!--}-->
-        <!--}-->
-    <!--}-->
-<!--</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) {
-                console.log(name);
+            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();
+                        },
+                        onCancel: () => {
+                            reject();
+                        }
+                    });
+                });
             }
         }
     }
 </script>
-
-
diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
index 1e966061..f94abc15 100644
--- a/src/components/tabs/tabs.vue
+++ b/src/components/tabs/tabs.vue
@@ -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();