github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix tabs

pull/9/head
tangjinzhou 2017-12-08 11:46:53 +08:00
parent 4fc9d027f5
commit dfaec7f076
16 changed files with 88 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/tabs/TabPane.vue
View File

@ -12,7 +12,6 @@
export default {
name: 'TabPane',
props: {
tabKey: [String, Number],
tab: [String, Number, Function],
disabled: Boolean,
closable: Boolean,
@ -34,7 +33,7 @@ export default {
},
active () {
const { activeKey } = this.$parent
return activeKey === this.tabKey
return activeKey === this.$vnode.key
},
isRender () {
const {

28
components/tabs/Tabs.vue
View File

@ -5,19 +5,19 @@ import TabContent from './TabContent'
import ScrollableInkTabBar from './ScrollableInkTabBar'
function getDefaultActiveKey (t) {
let activeKey
t.$slots.default && t.$slots.default.forEach(({ componentOptions = {}}) => {
t.$slots.default && t.$slots.default.forEach(({ componentOptions = {}, key: tabKey }) => {
const child = componentOptions.propsData
if (child && !activeKey && !child.disabled) {
activeKey = child.tabKey
activeKey = tabKey
}
})
return activeKey
}
function activeKeyIsValid (t, key) {
const keys = t.$slots.default && t.$slots.default.map(({ componentOptions = {}}) => {
const keys = t.$slots.default && t.$slots.default.map(({ componentOptions = {}, key: tabKey }) => {
const child = componentOptions.propsData
if (child) {
return child.tabKey
return tabKey
}
})
return key !== undefined && keys.indexOf(key) >= 0
@ -118,18 +118,19 @@ export default {
getNextActiveKey (next) {
const activeKey = this.stateActiveKey
const children = []
this.$slots.default && this.$slots.default.forEach(({ componentOptions = {}}) => {
this.$slots.default && this.$slots.default.forEach(({ componentOptions = {}, key: tabKey }) => {
const c = componentOptions.propsData
if (c && !c.disabled && c.disabled !== '') {
if (next) {
children.push(c)
children.push({ ...c, tabKey })
} else {
children.unshift(c)
children.unshift({ ...c, tabKey })
}
}
})
const length = children.length
let ret = length && children[0].key
let ret = length && children[0].tabKey
children.forEach((child, i) => {
if (child.tabKey === activeKey) {
if (i === length - 1) {
@ -158,8 +159,15 @@ export default {
} = this
const panels = []
$slots.default && $slots.default.forEach(tab => {
tab.componentOptions && panels.push(tab.componentOptions.propsData)
$slots.default && $slots.default.forEach(({ componentOptions, key: tabKey }) => {
if (componentOptions) {
if (componentOptions.propsData.tab === undefined) {
componentOptions.propsData.tab = $slots[`tab_${tabKey}`]
? h => h('span', [$slots[`tab_${tabKey}`]])
: null
}
panels.push({ ...componentOptions.propsData, tabKey })
}
})
const tabContentProps = {
props: {

6
components/tabs/demo/basic.vue
View File

@ -1,8 +1,8 @@
<template>
<Tabs defaultActiveKey="1" @change="callback">
<TabPane tab="Tab 1" tabKey="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" tabKey="2" forceRender>Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" tabKey="3">Content of Tab Pane 3</TabPane>
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2" forceRender>Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
</Tabs>
</template>
<script>

6
components/tabs/demo/card-top.vue
View File

@ -1,17 +1,17 @@
<template>
<div class="card-container">
<Tabs type="card">
<TabPane tab="Tab Title 1" tabKey="1">
<TabPane tab="Tab Title 1" key="1">
<p>Content of Tab Pane 1</p>
<p>Content of Tab Pane 1</p>
<p>Content of Tab Pane 1</p>
</TabPane>
<TabPane tab="Tab Title 2" tabKey="2">
<TabPane tab="Tab Title 2" key="2">
<p>Content of Tab Pane 2</p>
<p>Content of Tab Pane 2</p>
<p>Content of Tab Pane 2</p>
</TabPane>
<TabPane tab="Tab Title 3" tabKey="3">
<TabPane tab="Tab Title 3" key="3">
<p>Content of Tab Pane 3</p>
<p>Content of Tab Pane 3</p>
<p>Content of Tab Pane 3</p>

6
components/tabs/demo/card.vue
View File

@ -1,8 +1,8 @@
<template>
<Tabs @change="callback" type="card">
<TabPane tab="Tab 1" tabKey="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" tabKey="2">Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" tabKey="3">Content of Tab Pane 3</TabPane>
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
</Tabs>
</template>
<script>

2
components/tabs/demo/custom-add-trigger.vue
View File

@ -9,7 +9,7 @@
type="editable-card"
@edit="onEdit"
>
<TabPane v-for="pane in panes" :tab="pane.title" :key="pane.key" :tabKey="pane.key" :closable="pane.closable">
<TabPane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">
{{pane.content}}
</TabPane>
</Tabs>

6
components/tabs/demo/disabled.vue
View File

@ -1,8 +1,8 @@
<template>
<Tabs defaultActiveKey="1">
<TabPane tab="Tab 1" tabKey="1">Tab 1</TabPane>
<TabPane tab="Tab 2" disabled tabKey="2">Tab 2</TabPane>
<TabPane tab="Tab 3" tabKey="3">Tab 3</TabPane>
<TabPane tab="Tab 1" key="1">Tab 1</TabPane>
<TabPane tab="Tab 2" disabled key="2">Tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Tab 3</TabPane>
</Tabs>
</template>
<script>

2
components/tabs/demo/editable-card.vue
View File

@ -4,7 +4,7 @@
type="editable-card"
@edit="onEdit"
>
<TabPane v-for="pane in panes" :tab="pane.title" :key="pane.key" :tabKey="pane.key" :closable="pane.closable">
<TabPane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">
{{pane.content}}
</TabPane>
</Tabs>

12
components/tabs/demo/extra.vue
View File

@ -1,14 +1,14 @@
<template>
<div>
<Tabs :tabBarExtraContent="operations">
<TabPane tab="Tab 1" tabKey="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" tabKey="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" tabKey="3">Content of tab 3</TabPane>
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
</Tabs>
<Tabs>
<TabPane tab="Tab 1" tabKey="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" tabKey="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" tabKey="3">Content of tab 3</TabPane>
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
<AntButton slot="tabBarExtraContent">Extra Action</AntButton>
</Tabs>
</div>

22
components/tabs/demo/icon.vue
View File

@ -1,12 +1,30 @@
<template>
<div>
<Tabs defaultActiveKey="2">
<TabPane :tab="(h, tabKey) => renderTab(h, tabKey, 'apple')" tabKey="1">
<TabPane :tab="(h, tabKey) => renderTab(h, tabKey, 'apple')" key="1">
Tab 1
</TabPane>
<TabPane :tab="(h, tabKey) => renderTab(h, tabKey, 'android')" tabKey="2">
<TabPane :tab="(h, tabKey) => renderTab(h, tabKey, 'android')" key="2">
Tab 2
</TabPane>
</Tabs>
<Tabs defaultActiveKey="2">
<span slot="tab_1">
<Icon type="apple" />
Tab 1
</span>
<TabPane key="1">
Tab 1
</TabPane>
<span slot="tab_2">
<Icon type="android" />
Tab 2
</span>
<TabPane key="2">
Tab 2
</TabPane>
</Tabs>
</div>
</template>
<script>
import { Tabs, Icon } from 'antd'

6
components/tabs/demo/position.vue
View File

@ -7,9 +7,9 @@
<RadioButton value="right">right</RadioButton>
</RadioGroup>
<Tabs defaultActiveKey="1" :tabPosition="tabPosition">
<TabPane tab="Tab 1" tabKey="1">Content of Tab 1</TabPane>
<TabPane tab="Tab 2" tabKey="2">Content of Tab 2</TabPane>
<TabPane tab="Tab 3" tabKey="3">Content of Tab 3</TabPane>
<TabPane tab="Tab 1" key="1">Content of Tab 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of Tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab 3</TabPane>
</Tabs>
</div>

6
components/tabs/demo/size.vue
View File

@ -1,8 +1,8 @@
<template>
<Tabs defaultActiveKey="2" size="small">
<TabPane tab="Tab 1" tabKey="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" tabKey="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" tabKey="3">Content of tab 3</TabPane>
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
</Tabs>
</template>
<script>

22
components/tabs/demo/slide.vue
View File

@ -5,17 +5,17 @@
<RadioButton value="left">Vertical</RadioButton>
</RadioGroup>
<Tabs defaultActiveKey="1" :tabPosition="mode" :style="{ height: '200px'}" @prevClick="callback" @nextClick="callback">
<TabPane tab="Tab 1" tabKey="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" tabKey="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" tabKey="3">Content of tab 3</TabPane>
<TabPane tab="Tab 4" tabKey="4">Content of tab 4</TabPane>
<TabPane tab="Tab 5" tabKey="5">Content of tab 5</TabPane>
<TabPane tab="Tab 6" tabKey="6">Content of tab 6</TabPane>
<TabPane tab="Tab 7" tabKey="7">Content of tab 7</TabPane>
<TabPane tab="Tab 8" tabKey="8">Content of tab 8</TabPane>
<TabPane tab="Tab 9" tabKey="9">Content of tab 9</TabPane>
<TabPane tab="Tab 10" tabKey="10">Content of tab 10</TabPane>
<TabPane tab="Tab 11" tabKey="11">Content of tab 11</TabPane>
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
<TabPane tab="Tab 4" key="4">Content of tab 4</TabPane>
<TabPane tab="Tab 5" key="5">Content of tab 5</TabPane>
<TabPane tab="Tab 6" key="6">Content of tab 6</TabPane>
<TabPane tab="Tab 7" key="7">Content of tab 7</TabPane>
<TabPane tab="Tab 8" key="8">Content of tab 8</TabPane>
<TabPane tab="Tab 9" key="9">Content of tab 9</TabPane>
<TabPane tab="Tab 10" key="10">Content of tab 10</TabPane>
<TabPane tab="Tab 11" key="11">Content of tab 11</TabPane>
</Tabs>
</div>

11
components/tabs/index.vue
View File

@ -101,8 +101,15 @@ export default {
[`${prefixCls}-${type}`]: true,
[`${prefixCls}-no-animation`]: !tabPaneAnimated,
}
tabBarExtraContent = tabBarExtraContent || ((h) => {
return h('span', [$slots.tabBarExtraContent])
tabBarExtraContent = tabBarExtraContent === undefined && $slots.tabBarExtraContent
? h => h('span', [$slots.tabBarExtraContent])
: tabBarExtraContent
$slots.default && $slots.default.forEach(({ componentOptions, key: tabKey }) => {
if (componentOptions && componentOptions.propsData.tab === undefined) {
componentOptions.propsData.tab = $slots[`tab_${tabKey}`]
? h => h('span', [$slots[`tab_${tabKey}`]])
: null
}
})
const tabBarProps = {
inkBarAnimated,

2
components/tabs/index.zh-CN
View File

@ -48,5 +48,5 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
| tabKey | 对应 activeKey | string | 无 |
| key | 对应 activeKey | string | 无 |
| tab | 选项卡头显示文字 | string\|Function | 无 |

6
components/tabs/utils.js
View File

@ -1,5 +1,4 @@
export function toArray (children) {
// allow [c,[a,b]]
const c = []
children.forEach(child => {
if (child.data) {
@ -12,8 +11,7 @@ export function toArray (children) {
export function getActiveIndex (children, activeKey) {
const c = toArray(children)
for (let i = 0; i < c.length; i++) {
const tabKey = c[i].tabKey || c[i].componentOptions.propsData.tabKey
if (tabKey === activeKey) {
if (c[i].key === activeKey) {
return i
}
}
@ -22,7 +20,7 @@ export function getActiveIndex (children, activeKey) {
export function getActiveKey (children, index) {
const c = toArray(children)
return c[index].tabKey
return c[index].key
}
export function setTransform (style, v) {