diff --git a/components/_util/vnode.js b/components/_util/vnode.js index f89b2e3f2..3919d75d4 100644 --- a/components/_util/vnode.js +++ b/components/_util/vnode.js @@ -79,6 +79,9 @@ export function getComponentName (opts) { export function isValidElement (ele) { return !!ele.tag } +export function isEmptyElement (ele) { + return !(ele.tag || ele.text.trim() !== '') +} export function getClass (ele) { return ele.data && (ele.data.class || ele.data.staticClass) diff --git a/components/menu/src/MenuMixin.js b/components/menu/src/MenuMixin.js index e33792008..09db93ae4 100644 --- a/components/menu/src/MenuMixin.js +++ b/components/menu/src/MenuMixin.js @@ -136,7 +136,7 @@ export default { renderCommonMenuItem (child, i, subIndex, extraProps) { if (child.tag === undefined) { return child } warning((getComponentName(child.componentOptions) || '').indexOf(['MenuItem', 'MenuItemGroup']) === -1, - '`Menu child just support MenuItem and MenuItemGroup', + '`Menu children just support MenuItem and MenuItemGroup', ) const state = this.$data const props = this.$props diff --git a/components/tabs/index.vue b/components/tabs/index.vue index 4a822adea..2694a30f8 100644 --- a/components/tabs/index.vue +++ b/components/tabs/index.vue @@ -2,6 +2,8 @@ import Tabs from './src/Tabs' import isFlexSupported from '../_util/isFlexSupported' import { hasProp, getComponentFromProp } from '../_util/props-util' +import { getComponentName, isEmptyElement } from '../_util/vnode' +import warning from '../_util/warning' export default { props: { prefixCls: { type: String, default: 'ant-tabs' }, @@ -103,10 +105,19 @@ export default { [`${prefixCls}-no-animation`]: !tabPaneAnimated, } const tabBarExtraContent = getComponentFromProp(this, 'tabBarExtraContent') - $slots.default && $slots.default.forEach(({ componentOptions, key: tabKey }) => { - if (componentOptions && componentOptions.propsData.tab === undefined) { - const tab = (componentOptions.children || []).filter(({ data = {}}) => data.slot === 'tab') - componentOptions.propsData.tab = tab + 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) } }) const tabBarProps = { @@ -152,7 +163,7 @@ export default { class={cls} {...tabsProps} > - {this.$slots.default} + {children} {tabBarExtraContent ? : null}