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 3 <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
76 4 <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
77 5 <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
... ... @@ -89,129 +17,23 @@
89 17 methods: {
90 18 handleTabRemove (name) {
91 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 39 </script>
216   -
217   -
... ...
src/components/tabs/tabs.vue
  Show/Hide comments   View file @753720d
... ... @@ -91,7 +91,8 @@
91 91 closable: {
92 92 type: Boolean,
93 93 default: false
94   - }
  94 + },
  95 + beforeRemove: Function,
95 96 },
96 97 data () {
97 98 return {
... ... @@ -247,6 +248,21 @@
247 248 this.handleChange(index);
248 249 },
249 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 266 const tabs = this.getTabs();
251 267 const tab = tabs[index];
252 268 tab.$destroy();
... ...