2018-03-19 02:16:27 +00:00
|
|
|
|
2018-04-07 10:52:02 +00:00
|
|
|
import Tabs from '../vc-tabs/src/Tabs'
|
2017-11-30 11:11:42 +00:00
|
|
|
import isFlexSupported from '../_util/isFlexSupported'
|
2018-02-24 10:12:24 +00:00
|
|
|
import { hasProp, getComponentFromProp, getComponentName, isEmptyElement } from '../_util/props-util'
|
2018-01-21 03:52:34 +00:00
|
|
|
import warning from '../_util/warning'
|
2017-11-30 11:11:42 +00:00
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
prefixCls: { type: String, default: 'ant-tabs' },
|
|
|
|
activeKey: String,
|
|
|
|
defaultActiveKey: String,
|
|
|
|
hideAdd: { type: Boolean, default: false },
|
|
|
|
tabBarStyle: Object,
|
2017-12-01 10:48:16 +00:00
|
|
|
tabBarExtraContent: [String, Number, Function],
|
|
|
|
destroyInactiveTabPane: { type: Boolean, default: false },
|
2017-11-30 11:11:42 +00:00
|
|
|
type: {
|
|
|
|
validator (value) {
|
|
|
|
return ['line', 'card', 'editable-card'].includes(value)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
tabPosition: {
|
|
|
|
validator (value) {
|
|
|
|
return ['top', 'right', 'bottom', 'left'].includes(value)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
size: {
|
|
|
|
validator (value) {
|
2018-01-20 12:55:37 +00:00
|
|
|
return ['default', 'small', 'large'].includes(value)
|
2017-11-30 11:11:42 +00:00
|
|
|
},
|
|
|
|
},
|
2017-12-01 10:48:16 +00:00
|
|
|
animated: { type: [Boolean, Object], default: undefined },
|
2018-02-05 05:50:04 +00:00
|
|
|
tabBarGutter: Number,
|
2017-12-01 10:48:16 +00:00
|
|
|
},
|
|
|
|
model: {
|
|
|
|
prop: 'activeKey',
|
|
|
|
event: 'change',
|
2017-11-30 11:11:42 +00:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
createNewTab (targetKey) {
|
2017-12-01 10:48:16 +00:00
|
|
|
this.$emit('edit', targetKey, 'add')
|
2017-11-30 11:11:42 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
removeTab (targetKey, e) {
|
|
|
|
e.stopPropagation()
|
|
|
|
if (!targetKey) {
|
|
|
|
return
|
|
|
|
}
|
2017-12-01 10:48:16 +00:00
|
|
|
this.$emit('edit', targetKey, 'remove')
|
2017-11-30 11:11:42 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
handleChange (activeKey) {
|
2017-12-01 04:21:43 +00:00
|
|
|
this.$emit('change', activeKey)
|
2017-11-30 11:11:42 +00:00
|
|
|
},
|
2017-12-01 10:48:16 +00:00
|
|
|
onTabClick (val) {
|
|
|
|
this.$emit('tabClick', val)
|
|
|
|
},
|
|
|
|
onPrevClick (val) {
|
|
|
|
this.$emit('prevClick', val)
|
|
|
|
},
|
|
|
|
onNextClick (val) {
|
|
|
|
this.$emit('nextClick', val)
|
|
|
|
},
|
2017-11-30 11:11:42 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
mounted () {
|
|
|
|
const NO_FLEX = ' no-flex'
|
|
|
|
const tabNode = this.$el
|
|
|
|
if (tabNode && !isFlexSupported() && tabNode.className.indexOf(NO_FLEX) === -1) {
|
|
|
|
tabNode.className += NO_FLEX
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2017-12-01 10:48:16 +00:00
|
|
|
render (createElement) {
|
2017-11-30 11:11:42 +00:00
|
|
|
const {
|
|
|
|
prefixCls,
|
|
|
|
size,
|
|
|
|
type = 'line',
|
|
|
|
tabPosition,
|
|
|
|
tabBarStyle,
|
2017-12-01 10:48:16 +00:00
|
|
|
hideAdd,
|
2018-02-05 05:50:04 +00:00
|
|
|
onTabClick,
|
2017-11-30 11:11:42 +00:00
|
|
|
onPrevClick,
|
|
|
|
onNextClick,
|
2017-12-01 10:48:16 +00:00
|
|
|
animated,
|
|
|
|
destroyInactiveTabPane = false,
|
|
|
|
activeKey,
|
|
|
|
defaultActiveKey,
|
2017-12-07 07:05:33 +00:00
|
|
|
$slots,
|
2018-02-05 05:50:04 +00:00
|
|
|
tabBarGutter,
|
2017-12-01 10:48:16 +00:00
|
|
|
} = this
|
2017-11-30 11:11:42 +00:00
|
|
|
let { inkBarAnimated, tabPaneAnimated } = typeof animated === 'object' ? { // eslint-disable-line
|
2017-12-01 10:48:16 +00:00
|
|
|
inkBarAnimated: !!animated.inkBar, tabPaneAnimated: !!animated.tabPane,
|
2017-11-30 11:11:42 +00:00
|
|
|
} : {
|
2017-12-01 10:48:16 +00:00
|
|
|
inkBarAnimated: animated === undefined || animated, tabPaneAnimated: animated === undefined || animated,
|
2017-11-30 11:11:42 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// card tabs should not have animation
|
|
|
|
if (type !== 'line') {
|
2017-12-01 10:48:16 +00:00
|
|
|
tabPaneAnimated = animated === undefined ? false : tabPaneAnimated
|
2017-11-30 11:11:42 +00:00
|
|
|
}
|
|
|
|
const cls = {
|
2018-01-20 12:55:37 +00:00
|
|
|
[`${prefixCls}-small`]: size === 'small',
|
|
|
|
[`${prefixCls}-large`]: size === 'large',
|
|
|
|
[`${prefixCls}-default`]: size === 'default',
|
2017-11-30 11:11:42 +00:00
|
|
|
[`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
|
|
|
|
[`${prefixCls}-card`]: type.indexOf('card') >= 0,
|
|
|
|
[`${prefixCls}-${type}`]: true,
|
|
|
|
[`${prefixCls}-no-animation`]: !tabPaneAnimated,
|
|
|
|
}
|
2018-01-19 03:47:06 +00:00
|
|
|
const tabBarExtraContent = getComponentFromProp(this, 'tabBarExtraContent')
|
2018-01-21 03:52:34 +00:00
|
|
|
const children = []
|
|
|
|
$slots.default && $slots.default.forEach((child) => {
|
|
|
|
if (isEmptyElement(child)) { return }
|
|
|
|
const { componentOptions } = child
|
|
|
|
const componentName = getComponentName(componentOptions)
|
|
|
|
warning(componentName === 'TabPane', '`Tabs children just support TabPane')
|
|
|
|
if (componentOptions && componentName === 'TabPane') {
|
|
|
|
componentOptions.propsData = componentOptions.propsData || {}
|
|
|
|
if (componentOptions.propsData.tab === undefined) {
|
|
|
|
const tab = (componentOptions.children || []).filter(({ data = {}}) => data.slot === 'tab')
|
|
|
|
componentOptions.propsData.tab = tab
|
|
|
|
}
|
|
|
|
children.push(child)
|
2017-12-08 03:46:53 +00:00
|
|
|
}
|
2017-12-07 07:05:33 +00:00
|
|
|
})
|
2017-11-30 11:11:42 +00:00
|
|
|
const tabBarProps = {
|
2018-01-12 09:06:01 +00:00
|
|
|
props: {
|
|
|
|
hideAdd,
|
|
|
|
removeTab: this.removeTab,
|
|
|
|
createNewTab: this.createNewTab,
|
|
|
|
inkBarAnimated,
|
2018-02-05 05:50:04 +00:00
|
|
|
tabBarGutter,
|
2018-01-12 09:06:01 +00:00
|
|
|
},
|
|
|
|
on: {
|
2018-02-05 05:50:04 +00:00
|
|
|
tabClick: onTabClick,
|
2018-01-12 09:06:01 +00:00
|
|
|
prevClick: onPrevClick,
|
|
|
|
nextClick: onNextClick,
|
|
|
|
},
|
2017-11-30 11:11:42 +00:00
|
|
|
style: tabBarStyle,
|
|
|
|
}
|
2017-12-01 04:21:43 +00:00
|
|
|
const tabContentProps = {
|
2018-01-12 09:06:01 +00:00
|
|
|
props: {
|
|
|
|
animated: tabPaneAnimated,
|
|
|
|
animatedWithMargin: true,
|
|
|
|
},
|
2017-12-01 04:21:43 +00:00
|
|
|
}
|
2017-12-01 10:48:16 +00:00
|
|
|
const tabsProps = {
|
|
|
|
props: {
|
|
|
|
prefixCls,
|
|
|
|
tabBarPosition: tabPosition,
|
|
|
|
tabBarProps: tabBarProps,
|
|
|
|
tabContentProps: tabContentProps,
|
|
|
|
destroyInactiveTabPane,
|
|
|
|
defaultActiveKey,
|
|
|
|
type,
|
|
|
|
},
|
|
|
|
on: {
|
2018-01-12 09:06:01 +00:00
|
|
|
change: this.handleChange,
|
|
|
|
tabClick: this.onTabClick,
|
2017-12-01 10:48:16 +00:00
|
|
|
},
|
|
|
|
}
|
2017-12-27 10:15:11 +00:00
|
|
|
if (hasProp(this, 'activeKey')) {
|
|
|
|
tabsProps.props.activeKey = activeKey
|
|
|
|
}
|
2017-11-30 11:11:42 +00:00
|
|
|
return (
|
|
|
|
<Tabs
|
|
|
|
class={cls}
|
2017-12-01 10:48:16 +00:00
|
|
|
{...tabsProps}
|
2017-11-30 11:11:42 +00:00
|
|
|
>
|
2018-01-21 03:52:34 +00:00
|
|
|
{children}
|
2017-12-12 03:08:56 +00:00
|
|
|
{tabBarExtraContent ? <template slot='tabBarExtraContent'>
|
|
|
|
{tabBarExtraContent}
|
|
|
|
</template> : null}
|
2017-11-30 11:11:42 +00:00
|
|
|
</Tabs>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
}
|
2018-03-19 02:16:27 +00:00
|
|
|
|