67 lines
1.4 KiB
React
67 lines
1.4 KiB
React
|
|
||
|
|
import {
|
||
|
|
getTransformByIndex,
|
||
|
|
getActiveIndex,
|
||
|
|
getTransformPropValue,
|
||
|
|
getMarginStyle,
|
||
|
|
} from './utils'
|
||
|
|
export default {
|
||
|
|
name: 'TabContent',
|
||
|
|
props: {
|
||
|
|
animated: { type: Boolean, default: true },
|
||
|
|
animatedWithMargin: { type: Boolean, default: true },
|
||
|
|
prefixCls: {
|
||
|
|
default: 'ant-tabs',
|
||
|
|
type: String,
|
||
|
|
},
|
||
|
|
activeKey: String,
|
||
|
|
tabBarPosition: String,
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
classes () {
|
||
|
|
const { animated, prefixCls } = this
|
||
|
|
return {
|
||
|
|
[`${prefixCls}-content`]: true,
|
||
|
|
[animated
|
||
|
|
? `${prefixCls}-content-animated`
|
||
|
|
: `${prefixCls}-content-no-animated`]: true,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
},
|
||
|
|
render () {
|
||
|
|
const {
|
||
|
|
activeKey,
|
||
|
|
tabBarPosition, animated, animatedWithMargin, classes,
|
||
|
|
} = this
|
||
|
|
let style = {}
|
||
|
|
if (animated && this.$slots.default) {
|
||
|
|
const activeIndex = getActiveIndex(this.$slots.default, activeKey)
|
||
|
|
if (activeIndex !== -1) {
|
||
|
|
const animatedStyle = animatedWithMargin
|
||
|
|
? getMarginStyle(activeIndex, tabBarPosition)
|
||
|
|
: getTransformPropValue(getTransformByIndex(activeIndex, tabBarPosition))
|
||
|
|
style = animatedStyle
|
||
|
|
} else {
|
||
|
|
style = {
|
||
|
|
display: 'none',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
class={classes}
|
||
|
|
style={style}
|
||
|
|
>
|
||
|
|
{this.$slots.default}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|