Commit 5b143a2b3f0d690f6a48b251203c68de97abe55d
1 parent
c9985ada
fixed #5401 , close #5403
Showing
3 changed files
with
22 additions
and
39 deletions
Show diff stats
examples/routers/tabs.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Tabs type="card" :animated="true" closable @on-tab-remove="handleTabRemove" :beforeRemove="handleBeforeRemove"> | ||
| 3 | - <Wrapper> | ||
| 4 | - <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane> | ||
| 5 | - <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane> | ||
| 6 | - <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane> | ||
| 7 | - </Wrapper> | ||
| 8 | - </Tabs> | ||
| 9 | - | ||
| 10 | - <!--<Tabs type="card" :animated="true" closable @on-tab-remove="handleTabRemove" :beforeRemove="handleBeforeRemove">--> | ||
| 11 | - <!--<TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>--> | ||
| 12 | - <!--<TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>--> | ||
| 13 | - <!--<TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>--> | ||
| 14 | - <!--</Tabs>--> | 2 | + <div> |
| 3 | + <Button @click="showSecond = !showSecond">change</Button> | ||
| 4 | + <Tabs value="name1"> | ||
| 5 | + <TabPane label="标签一" name="name1" :index="1">标签一的内容</TabPane> | ||
| 6 | + <TabPane label="标签二" name="name2" :index="2" v-if="showSecond">标签二的内容</TabPane> | ||
| 7 | + <TabPane label="标签三" name="name3" :index="3">标签三的内容</TabPane> | ||
| 8 | + </Tabs> | ||
| 9 | + </div> | ||
| 15 | </template> | 10 | </template> |
| 16 | <script> | 11 | <script> |
| 17 | - import Wrapper from '../components/wrapper.vue'; | ||
| 18 | export default { | 12 | export default { |
| 19 | - components: { Wrapper }, | ||
| 20 | data () { | 13 | data () { |
| 21 | return { | 14 | return { |
| 22 | - tab0: true, | ||
| 23 | - tab1: true, | ||
| 24 | - tab2: true | ||
| 25 | - } | ||
| 26 | - }, | ||
| 27 | - methods: { | ||
| 28 | - handleTabRemove (name) { | ||
| 29 | - this['tab' + name] = false; | ||
| 30 | - }, | ||
| 31 | - handleBeforeRemove (index) { | ||
| 32 | - console.log(index); | ||
| 33 | - | ||
| 34 | - return new Promise((resolve, reject) => { | ||
| 35 | - this.$Modal.confirm({ | ||
| 36 | - title: 'Title', | ||
| 37 | - content: '<p>Content of dialog</p><p>Content of dialog</p>', | ||
| 38 | - onOk: () => { | ||
| 39 | - resolve(); | ||
| 40 | - }, | ||
| 41 | - onCancel: () => { | ||
| 42 | - reject(); | ||
| 43 | - } | ||
| 44 | - }); | ||
| 45 | - }); | 15 | + showSecond: false |
| 46 | } | 16 | } |
| 47 | } | 17 | } |
| 48 | } | 18 | } |
src/components/tabs/pane.vue
src/components/tabs/tabs.vue
| @@ -187,6 +187,14 @@ | @@ -187,6 +187,14 @@ | ||
| 187 | } | 187 | } |
| 188 | }); | 188 | }); |
| 189 | 189 | ||
| 190 | + // 在 TabPane 使用 v-if 时，并不会按照预先的顺序渲染，这时可设置 index，并从小到大排序 | ||
| 191 | + TabPanes.sort((a, b) => { | ||
| 192 | + if (a.index && b.index) { | ||
| 193 | + return a.index > b.index ? 1 : -1; | ||
| 194 | + } else { | ||
| 195 | + return 1; | ||
| 196 | + } | ||
| 197 | + }); | ||
| 190 | return TabPanes; | 198 | return TabPanes; |
| 191 | }, | 199 | }, |
| 192 | updateNav () { | 200 | updateNav () { |