chenhaodong / mew-iview

Commit 753720d9bd8e8583b92a70620a04bde2c34e92c9

Authored by 梁灏
1 parent cec470eb

Tabs add prop beforeRemove, close #4379

Showing 2 changed files with 34 additions and 196 deletions   Show diff stats
Inline Side-by-side
examples/routers/tabs.vue
  Show/Hide comments   View file @753720d
1 -<!--<template>-->  
2 - <!--<Tabs value="name1" :animated="false">-->  
3 - <!--<Tab-pane label="test" name="test">-->  
4 - <!--<Tabs type="card" v-bind:animated="true">-->  
5 - <!--<Tab-pane label="标签2一">标签2一的内容</Tab-pane>-->  
6 - <!--<Tab-pane label="标签2二">标签2二的内容</Tab-pane>-->  
7 - <!--<Tab-pane label="标签2三">标签2三的内容</Tab-pane>-->  
8 - <!--</Tabs>-->  
9 - <!--</Tab-pane>-->  
10 - <!--<Tab-pane :label="label1" name="name1">-->  
11 - <!--<Table :columns="columns1" :data="data1"></Table>-->  
12 - <!--</Tab-pane>-->  
13 - <!--<Tab-pane label="标签二" name="name2">-->  
14 - <!--<Table :columns="columns1" :data="data1"></Table>-->  
15 - <!--</Tab-pane>-->  
16 - <!--<Tab-pane label="标签三" name="name3">-->  
17 - <!--<Table :columns="columns1" :data="data1"></Table>-->  
18 - <!--</Tab-pane>-->  
19 - <!--</Tabs>-->  
20 -<!--</template>-->  
21 -<!--<script>-->  
22 - <!--export default {-->  
23 - <!--data () {-->  
24 - <!--return {-->  
25 - <!--label1: (h) => {-->  
26 - <!--return h('div', [-->  
27 - <!--h('span', '标签一'),-->  
28 - <!--h('Button', 'button')-->  
29 - <!--]);-->  
30 - <!--},-->  
31 - <!--columns1: [-->  
32 - <!--{-->  
33 - <!--title: '姓名',-->  
34 - <!--key: 'name'-->  
35 - <!--},-->  
36 - <!--{-->  
37 - <!--title: '年龄',-->  
38 - <!--key: 'age'-->  
39 - <!--},-->  
40 - <!--{-->  
41 - <!--title: '地址',-->  
42 - <!--key: 'address'-->  
43 - <!--}-->  
44 - <!--],-->  
45 - <!--data1: [-->  
46 - <!--{-->  
47 - <!--name: '王小明',-->  
48 - <!--age: 18,-->  
49 - <!--address: '北京市朝阳区芍药居'-->  
50 - <!--},-->  
51 - <!--{-->  
52 - <!--name: '张小刚',-->  
53 - <!--age: 25,-->  
54 - <!--address: '北京市海淀区西二旗'-->  
55 - <!--},-->  
56 - <!--{-->  
57 - <!--name: '李小红',-->  
58 - <!--age: 30,-->  
59 - <!--address: '上海市浦东新区世纪大道'-->  
60 - <!--},-->  
61 - <!--{-->  
62 - <!--name: '周小伟',-->  
63 - <!--age: 26,-->  
64 - <!--address: '深圳市南山区深南大道'-->  
65 - <!--}-->  
66 - <!--]-->  
67 - <!--}-->  
68 - <!--}-->  
69 - <!--}-->  
70 -<!--</script>-->  
71 -  
72 -  
73 -<!-- <template>  
74 - <Tabs type="card" closable @on-tab-remove="handleTabRemove"> 1 +<template>
  2 + <Tabs type="card" closable @on-tab-remove="handleTabRemove" :beforeRemove="handleBeforeRemove">
75 <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane> 3 <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
76 <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane> 4 <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
77 <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane> 5 <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
@@ -89,129 +17,23 @@ @@ -89,129 +17,23 @@
89 methods: { 17 methods: {
90 handleTabRemove (name) { 18 handleTabRemove (name) {
91 this['tab' + name] = false; 19 this['tab' + name] = false;
92 - }  
93 - }  
94 - }  
95 -</script> -->  
96 -  
97 -<!--<template>-->  
98 - <!--<div>-->  
99 - <!--<Button type="ghost" @click="toFirst" size="small">to first</Button>-->  
100 - <!--<Button type="ghost" @click="toLast" size="small">to last</Button>-->  
101 - <!--<Tabs type="card" :animated="animated" v-model="activeTab">-->  
102 - <!--<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab" :name="tab+''" closable>标签{{ tab }}</TabPane>-->  
103 - <!--<div slot="extra">-->  
104 - <!--<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>-->  
105 - <!--</div>-->  
106 - <!--</Tabs>-->  
107 - <!--</div>-->  
108 -<!--</template>-->  
109 -<!--<script>-->  
110 - <!--export default {-->  
111 - <!--data () {-->  
112 - <!--return {-->  
113 - <!--tabs: 2,-->  
114 - <!--activeTab:"2",-->  
115 - <!--animated:true-->  
116 - <!--}-->  
117 - <!--},-->  
118 - <!--methods: {-->  
119 - <!--handleTabsAdd () {-->  
120 - <!--this.tabs ++;-->  
121 - <!--this.activeTab = this.tabs + '';-->  
122 - <!--},-->  
123 - <!--toFirst () {-->  
124 - <!--this.activeTab = '1';-->  
125 - <!--},-->  
126 - <!--toLast () {-->  
127 - <!--this.activeTab = this.tabs+'';-->  
128 - <!--}-->  
129 - <!--}-->  
130 - <!--}-->  
131 -<!--</script>-->  
132 -  
133 -<!--<template>-->  
134 - <!--<div>-->  
135 - <!--<Tabs type="card">-->  
136 - <!--<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>-->  
137 - <!--</Tabs>-->  
138 - <!--<Button type="ghost" @click="handleTabsAdd" size="small">增加</Button>-->  
139 - <!--<Button type="ghost" @click="handleTabsMin" size="small">减少</Button>-->  
140 - <!--</div>-->  
141 -<!--</template>-->  
142 -<!--<script>-->  
143 - <!--export default {-->  
144 - <!--data () {-->  
145 - <!--return {-->  
146 - <!--tabs: 2-->  
147 - <!--}-->  
148 - <!--},-->  
149 - <!--methods: {-->  
150 - <!--handleTabsAdd () {-->  
151 - <!--this.tabs ++;-->  
152 - <!--},-->  
153 - <!--handleTabsMin () {-->  
154 - <!--this.tabs &#45;&#45;;-->  
155 - <!--}-->  
156 - <!--}-->  
157 - <!--}-->  
158 -<!--</script>-->  
159 -  
160 -<template>  
161 - <div>  
162 - <i-input></i-input>  
163 - <Button type="ghost" @click="handleTabsAdd" size="small" slot="extra">增加</Button>  
164 -  
165 - <hr style="margin: 10px 0;">  
166 - <Tabs type="card">  
167 - <TabPane v-for="tab in tabs" :key="tab" :label="'Tab' + tab">  
168 - <div>  
169 - <h3>Some text...</h3>  
170 - <i-button>Some focusable content...{{ tab }}</i-button>  
171 - </div>  
172 - </TabPane>  
173 - </Tabs>  
174 - <Tabs type="card">  
175 - <TabPane label="标签一">标签一的内容</TabPane>  
176 - <TabPane label="标签二" disabled>标签二的内容</TabPane>  
177 - <TabPane label="标签三">标签三的内容</TabPane>  
178 - </Tabs>  
179 - <tabs v-model="name" type="card" @on-click="handleClick">  
180 - <tab-pane name="a" label="标签一">  
181 - <div>1</div>  
182 - </tab-pane>  
183 - <tab-pane name="b" label="标签二">  
184 - <div>2</div>  
185 - </tab-pane>  
186 - <tab-pane name="c" label="标签三">  
187 - <div>3</div>  
188 - </tab-pane>  
189 - <tab-pane name="d" label="标签四">  
190 - <div>4</div>  
191 - </tab-pane>  
192 - <tab-pane name="e" label="标签五">  
193 - <div>5</div>  
194 - </tab-pane>  
195 - </tabs>  
196 - </div>  
197 -</template>  
198 -<script>  
199 - export default {  
200 - data () {  
201 - return {  
202 - tabs: 2,  
203 - name: 'b',  
204 - }  
205 - },  
206 - methods: {  
207 - handleTabsAdd () {  
208 - this.tabs ++;  
209 }, 20 },
210 - handleClick (name) {  
211 - console.log(name); 21 + handleBeforeRemove (index) {
  22 + console.log(index);
  23 +
  24 + return new Promise((resolve, reject) => {
  25 + this.$Modal.confirm({
  26 + title: 'Title',
  27 + content: '<p>Content of dialog</p><p>Content of dialog</p>',
  28 + onOk: () => {
  29 + resolve();
  30 + },
  31 + onCancel: () => {
  32 + reject();
  33 + }
  34 + });
  35 + });
212 } 36 }
213 } 37 }
214 } 38 }
215 </script> 39 </script>
216 -  
217 -  
src/components/tabs/tabs.vue
  Show/Hide comments   View file @753720d
@@ -91,7 +91,8 @@ @@ -91,7 +91,8 @@
91 closable: { 91 closable: {
92 type: Boolean, 92 type: Boolean,
93 default: false 93 default: false
94 - } 94 + },
  95 + beforeRemove: Function,
95 }, 96 },
96 data () { 97 data () {
97 return { 98 return {
@@ -247,6 +248,21 @@ @@ -247,6 +248,21 @@
247 this.handleChange(index); 248 this.handleChange(index);
248 }, 249 },
249 handleRemove (index) { 250 handleRemove (index) {
  251 + if (!this.beforeRemove) {
  252 + return this.handleRemoveTab(index);
  253 + }
  254 +
  255 + const before = this.beforeRemove(index);
  256 +
  257 + if (before && before.then) {
  258 + before.then(() => {
  259 + this.handleRemoveTab(index);
  260 + });
  261 + } else {
  262 + this.handleRemoveTab(index);
  263 + }
  264 + },
  265 + handleRemoveTab (index) {
250 const tabs = this.getTabs(); 266 const tabs = this.getTabs();
251 const tab = tabs[index]; 267 const tab = tabs[index];
252 tab.$destroy(); 268 tab.$destroy();