From 5b143a2b3f0d690f6a48b251203c68de97abe55d Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Fri, 15 Mar 2019 15:44:27 +0800
Subject: [PATCH] fixed #5401 , close #5403
---
examples/routers/tabs.vue | 48 +++++++++---------------------------------------
src/components/tabs/pane.vue | 5 +++++
src/components/tabs/tabs.vue | 8 ++++++++
3 files changed, 22 insertions(+), 39 deletions(-)
diff --git a/examples/routers/tabs.vue b/examples/routers/tabs.vue
index 5c6edac..38ac2f0 100644
--- a/examples/routers/tabs.vue
+++ b/examples/routers/tabs.vue
@@ -1,48 +1,18 @@
<template>
- <Tabs type="card" :animated="true" closable @on-tab-remove="handleTabRemove" :beforeRemove="handleBeforeRemove">
- <Wrapper>
- <TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
- <TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
- <TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
- </Wrapper>
- </Tabs>
-
- <!--<Tabs type="card" :animated="true" 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>-->
- <!--</Tabs>-->
+ <div>
+ <Button @click="showSecond = !showSecond">change</Button>
+ <Tabs value="name1">
+ <TabPane label="标签一" name="name1" :index="1">标签一的内容</TabPane>
+ <TabPane label="标签二" name="name2" :index="2" v-if="showSecond">标签二的内容</TabPane>
+ <TabPane label="标签三" name="name3" :index="3">标签三的内容</TabPane>
+ </Tabs>
+ </div>
</template>
<script>
- import Wrapper from '../components/wrapper.vue';
export default {
- components: { Wrapper },
data () {
return {
- tab0: true,
- tab1: true,
- tab2: true
- }
- },
- methods: {
- handleTabRemove (name) {
- this['tab' + name] = false;
- },
- 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();
- }
- });
- });
+ showSecond: false
}
}
}
diff --git a/src/components/tabs/pane.vue b/src/components/tabs/pane.vue
index 7a14a76..318e011 100644
--- a/src/components/tabs/pane.vue
+++ b/src/components/tabs/pane.vue
@@ -30,6 +30,11 @@
tab: {
type: String
},
+ // 在 TabPane 使用 v-if 时，并不会按照预先的顺序渲染，这时可设置 index，并从小到大排序
+ // 数值需大于 0
+ index: {
+ type: Number
+ }
},
data () {
return {
diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
index b3e8062..5f1000d 100644
--- a/src/components/tabs/tabs.vue
+++ b/src/components/tabs/tabs.vue
@@ -187,6 +187,14 @@
}
});
+ // 在 TabPane 使用 v-if 时，并不会按照预先的顺序渲染，这时可设置 index，并从小到大排序
+ TabPanes.sort((a, b) => {
+ if (a.index && b.index) {
+ return a.index > b.index ? 1 : -1;
+ } else {
+ return 1;
+ }
+ });
return TabPanes;
},
updateNav () {
--
libgit2 0.21.4