You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
3.4 KiB
132 lines
3.4 KiB
import Icon from '../icon'
|
|
function noop () {
|
|
}
|
|
export default {
|
|
props: {
|
|
prefixCls: {
|
|
default: 'ant-tabs',
|
|
type: String,
|
|
},
|
|
tabBarPosition: {
|
|
default: 'top',
|
|
type: String,
|
|
},
|
|
disabled: Boolean,
|
|
onKeyDown: {
|
|
default: noop,
|
|
type: Function,
|
|
},
|
|
onTabClick: {
|
|
default: noop,
|
|
type: Function,
|
|
},
|
|
activeKey: String,
|
|
panels: Array,
|
|
hideAdd: Boolean,
|
|
removeTab: {
|
|
default: noop,
|
|
type: Function,
|
|
},
|
|
createNewTab: {
|
|
default: noop,
|
|
type: Function,
|
|
},
|
|
},
|
|
methods: {
|
|
getTabs (h) {
|
|
const { panels: children, activeKey, prefixCls } = this
|
|
const rst = []
|
|
children.forEach((child) => {
|
|
if (!child) {
|
|
return
|
|
}
|
|
let { disabled, closable } = child
|
|
const { tabKey, tab } = child
|
|
// componentOptions.propsData中获取的值disabled没有根据类型初始化, 会出现空字符串
|
|
disabled = disabled === '' || disabled
|
|
let cls = activeKey === tabKey ? `${prefixCls}-tab-active` : ''
|
|
cls += ` ${prefixCls}-tab`
|
|
if (disabled) {
|
|
cls += ` ${prefixCls}-tab-disabled`
|
|
} else {
|
|
}
|
|
const onClick = () => {
|
|
!disabled && this.onTabClick(tabKey)
|
|
}
|
|
|
|
let tabC = typeof tab === 'function' ? child.tab(h, tabKey) : tab
|
|
if (this.$parent.type === 'editable-card') {
|
|
closable = closable === undefined ? true : closable === '' || closable
|
|
const closeIcon = closable ? (
|
|
<Icon
|
|
type='close'
|
|
onClick={e => this.removeTab(tabKey, e)}
|
|
/>
|
|
) : null
|
|
tabC = <div class={closable ? undefined : `${prefixCls}-tab-unclosable`}>
|
|
{tabC}
|
|
{closeIcon}
|
|
</div>
|
|
}
|
|
|
|
rst.push(
|
|
<div
|
|
role='tab'
|
|
aria-disabled={disabled ? 'true' : 'false'}
|
|
aria-selected={activeKey === tabKey ? 'true' : 'false'}
|
|
class={cls}
|
|
key={tabKey}
|
|
onClick={onClick}
|
|
ref={activeKey === tabKey ? 'activeTab' : undefined}
|
|
>
|
|
{tabC}
|
|
</div>
|
|
)
|
|
})
|
|
|
|
return rst
|
|
},
|
|
getRootNode (contents, createElement) {
|
|
const {
|
|
prefixCls, onKeyDown, tabBarPosition, hideAdd,
|
|
} = this
|
|
let extraContent = this.$slots.extraContent
|
|
const tabsType = this.$parent.type
|
|
const cls = {
|
|
[`${prefixCls}-bar`]: true,
|
|
}
|
|
const topOrBottom = (tabBarPosition === 'top' || tabBarPosition === 'bottom')
|
|
const tabBarExtraContentStyle = topOrBottom ? { float: 'right' } : {}
|
|
let children = contents
|
|
if (tabsType === 'editable-card' && !hideAdd) {
|
|
extraContent = (
|
|
<span>
|
|
<Icon type='plus' class={`${prefixCls}-new-tab`} onClick={this.createNewTab} />
|
|
{extraContent}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
children = [
|
|
<div key='extra' class={`${prefixCls}-extra-content`} style={tabBarExtraContentStyle}>
|
|
{extraContent}
|
|
</div>,
|
|
contents,
|
|
]
|
|
children = topOrBottom ? children : children.reverse()
|
|
|
|
return (
|
|
<div
|
|
role='tablist'
|
|
class={cls}
|
|
tabIndex='0'
|
|
ref='root'
|
|
onKeydown={onKeyDown}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
},
|
|
},
|
|
}
|