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

28
components/tabs/Tabs.vue
View File

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

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

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

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

@ -1,17 +1,17 @@
<template> <template>
<div class="card-container"> <div class="card-container">
<Tabs type="card"> <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> <p>Content of Tab Pane 1</p>
<p>Content of Tab Pane 1</p> <p>Content of Tab Pane 1</p>
</TabPane> </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> <p>Content of Tab Pane 2</p>
<p>Content of Tab Pane 2</p> <p>Content of Tab Pane 2</p>
</TabPane> </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> <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> <template>
<Tabs @change="callback" type="card"> <Tabs @change="callback" type="card">
<TabPane tab="Tab 1" tabKey="1">Content of Tab Pane 1</TabPane> <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" tabKey="2">Content of Tab Pane 2</TabPane> <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" tabKey="3">Content of Tab Pane 3</TabPane> <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
</Tabs> </Tabs>
</template> </template>
<script> <script>

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

@ -9,7 +9,7 @@
type="editable-card" type="editable-card"
@edit="onEdit" @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}} {{pane.content}}
</TabPane> </TabPane>
</Tabs> </Tabs>

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

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

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

@ -4,7 +4,7 @@
type="editable-card" type="editable-card"
@edit="onEdit" @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}} {{pane.content}}
</TabPane> </TabPane>
</Tabs> </Tabs>

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

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

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

@ -1,12 +1,30 @@
<template> <template>
<div>
<Tabs defaultActiveKey="2"> <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 Tab 1
</TabPane> </TabPane>
<TabPane :tab="(h, tabKey) => renderTab(h, tabKey, 'android')" tabKey="2"> <TabPane :tab="(h, tabKey) => renderTab(h, tabKey, 'android')" key="2">
Tab 2 Tab 2
</TabPane> </TabPane>
</Tabs> </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> </template>
<script> <script>
import { Tabs, Icon } from 'antd' import { Tabs, Icon } from 'antd'

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

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

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

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

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

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

11
components/tabs/index.vue
View File

@ -101,8 +101,15 @@ export default {
[`${prefixCls}-${type}`]: true, [`${prefixCls}-${type}`]: true,
[`${prefixCls}-no-animation`]: !tabPaneAnimated, [`${prefixCls}-no-animation`]: !tabPaneAnimated,
} }
tabBarExtraContent = tabBarExtraContent || ((h) => { tabBarExtraContent = tabBarExtraContent === undefined && $slots.tabBarExtraContent
return h('span', [$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 = { const tabBarProps = {
inkBarAnimated, inkBarAnimated,

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

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

6
components/tabs/utils.js
View File

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