From 60cd5475c15cd41978053a41b0188001a4f218e6 Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Wed, 24 Jun 2020 16:07:03 +0800 Subject: [PATCH] fix: tabs --- antdv-demo | 2 +- breakChange-2.x.md | 6 ++++++ components/_util/props-util.js | 2 +- components/tabs/TabBar.jsx | 7 +------ components/tabs/tabs.jsx | 13 +++++-------- components/vc-tabs/src/InkTabBarNode.jsx | 5 +++-- components/vc-tabs/src/ScrollableInkTabBar.jsx | 12 ------------ components/vc-tabs/src/ScrollableTabBarNode.jsx | 1 + components/vc-tabs/src/TabBarRootNode.jsx | 7 ++++++- components/vc-tabs/src/TabBarTabsNode.jsx | 1 + components/vc-tabs/src/TabContent.jsx | 13 ++++++++++--- components/vc-tabs/src/Tabs.jsx | 10 ++++++++-- components/vc-tabs/src/utils.js | 6 +++++- examples/index.js | 6 ++++-- package.json | 2 +- 15 files changed, 53 insertions(+), 40 deletions(-) diff --git a/antdv-demo b/antdv-demo index 7e7899bc4..19713260a 160000 --- a/antdv-demo +++ b/antdv-demo @@ -1 +1 @@ -Subproject commit 7e7899bc49e5e5ebe4716a5ba12215ecfe0d3d22 +Subproject commit 19713260a1fcd951d75129e542f40c8e7c1bac35 diff --git a/breakChange-2.x.md b/breakChange-2.x.md index 059e76a62..ed695ee48 100644 --- a/breakChange-2.x.md +++ b/breakChange-2.x.md @@ -63,3 +63,9 @@ v-model -> v-model:value ## Switch v-model -> v-model:checked + +## tabs + +v-model -> v-model:activeKey + +renderTabBar({props, on, style, class}, DefaultTabBar) -> {DefaultTabBar, ...props} 多参数改成单参数并且扁平化处理 diff --git a/components/_util/props-util.js b/components/_util/props-util.js index f5b902b2f..a56163698 100644 --- a/components/_util/props-util.js +++ b/components/_util/props-util.js @@ -141,7 +141,7 @@ const getComponent = (instance, prop, options = instance, execute = true) => { const temp = instance.props && instance.props[prop]; if (temp !== undefined) { return typeof temp === 'function' && execute ? temp(options) : temp; - } else if (instance.children && instance.children[name]) { + } else if (instance.children && instance.children[prop]) { let com = instance.children[prop]; com = execute && com ? com(options) : com; return Array.isArray(com) && com.length === 1 ? com[0] : com; diff --git a/components/tabs/TabBar.jsx b/components/tabs/TabBar.jsx index a4575ddad..c3857a899 100644 --- a/components/tabs/TabBar.jsx +++ b/components/tabs/TabBar.jsx @@ -3,7 +3,6 @@ import DownOutlined from '@ant-design/icons-vue/DownOutlined'; import LeftOutlined from '@ant-design/icons-vue/LeftOutlined'; import RightOutlined from '@ant-design/icons-vue/RightOutlined'; import ScrollableInkTabBar from '../vc-tabs/src/ScrollableInkTabBar'; -import { cloneElement } from '../_util/vnode'; import PropTypes from '../_util/vue-types'; const TabBar = { @@ -74,12 +73,8 @@ const TabBar = { class: cls, }; - let RenderTabBar; - if (renderTabBar) { - RenderTabBar = renderTabBar(renderProps, ScrollableInkTabBar); - // https://github.com/vueComponent/ant-design-vue/issues/2157 - return cloneElement(RenderTabBar, renderProps); + return renderTabBar({ ...renderProps, DefaultTabBar: ScrollableInkTabBar }); } else { return ; } diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx index b16a3f6f6..acb7216f6 100644 --- a/components/tabs/tabs.jsx +++ b/components/tabs/tabs.jsx @@ -21,10 +21,7 @@ import TabBar from './TabBar'; export default { TabPane, name: 'ATabs', - model: { - prop: 'activeKey', - event: 'change', - }, + inheritAttrs: false, props: { prefixCls: PropTypes.string, activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), @@ -88,8 +85,8 @@ export default { hideAdd, renderTabBar, } = props; - const { class: className, style, ...restProps } = this.$attrs; - const getPrefixCls = this.configProvider().getPrefixCls; + const { class: className, ...restProps } = this.$attrs; + const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('tabs', customizePrefixCls); const children = filterEmpty(getSlot(this)); @@ -151,7 +148,7 @@ export default { const renderTabBarSlot = renderTabBar || this.$slots.renderTabBar; const tabBarProps = { - ...this.$props, + ...props, prefixCls, tabBarExtraContent, renderTabBar: renderTabBarSlot, @@ -162,7 +159,7 @@ export default { [`${prefixCls}-card-content`]: type.indexOf('card') >= 0, }; const tabsProps = { - ...getOptionProps(this), + ...props, prefixCls, tabBarPosition: tabPosition, // https://github.com/vueComponent/ant-design-vue/issues/2030 diff --git a/components/vc-tabs/src/InkTabBarNode.jsx b/components/vc-tabs/src/InkTabBarNode.jsx index 105dcec6c..0342a64b3 100644 --- a/components/vc-tabs/src/InkTabBarNode.jsx +++ b/components/vc-tabs/src/InkTabBarNode.jsx @@ -84,6 +84,7 @@ function componentDidUpdate(component, init) { export default { name: 'InkTabBarNode', mixins: [BaseMixin], + inheritAttrs: false, props: { inkBarAnimated: { type: Boolean, @@ -99,13 +100,13 @@ export default { activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), }, updated() { - this.$nextTick(function() { + this.$nextTick(() => { componentDidUpdate(this); }); }, mounted() { - this.$nextTick(function() { + this.$nextTick(() => { componentDidUpdate(this, true); }); }, diff --git a/components/vc-tabs/src/ScrollableInkTabBar.jsx b/components/vc-tabs/src/ScrollableInkTabBar.jsx index 8731b04d6..7b83503e1 100644 --- a/components/vc-tabs/src/ScrollableInkTabBar.jsx +++ b/components/vc-tabs/src/ScrollableInkTabBar.jsx @@ -7,18 +7,6 @@ import SaveRef from './SaveRef'; export default { name: 'ScrollableInkTabBar', inheritAttrs: false, - props: [ - 'extraContent', - 'inkBarAnimated', - 'tabBarGutter', - 'prefixCls', - 'navWrapper', - 'tabBarPosition', - 'panels', - 'activeKey', - 'prevIcon', - 'nextIcon', - ], render() { const { default: renderTabBarNode } = this.$slots; return ( diff --git a/components/vc-tabs/src/ScrollableTabBarNode.jsx b/components/vc-tabs/src/ScrollableTabBarNode.jsx index d9e699b65..02e1645fe 100644 --- a/components/vc-tabs/src/ScrollableTabBarNode.jsx +++ b/components/vc-tabs/src/ScrollableTabBarNode.jsx @@ -10,6 +10,7 @@ function noop() {} export default { name: 'ScrollableTabBarNode', mixins: [BaseMixin], + inheritAttrs: false, props: { activeKey: PropTypes.any, getRef: PropTypes.func.def(() => {}), diff --git a/components/vc-tabs/src/TabBarRootNode.jsx b/components/vc-tabs/src/TabBarRootNode.jsx index f4dae37e4..515c2498a 100644 --- a/components/vc-tabs/src/TabBarRootNode.jsx +++ b/components/vc-tabs/src/TabBarRootNode.jsx @@ -3,17 +3,18 @@ import PropTypes from '../../_util/vue-types'; import BaseMixin from '../../_util/BaseMixin'; import createRefHooks from '../../_util/createRefHooks'; import { getSlot } from '../../_util/props-util'; +import { getDataAttr } from './utils'; function noop() {} export default { name: 'TabBarRootNode', mixins: [BaseMixin], + inheritAttrs: false, props: { saveRef: PropTypes.func.def(noop), getRef: PropTypes.func.def(noop), prefixCls: PropTypes.string.def(''), tabBarPosition: PropTypes.string.def('top'), extraContent: PropTypes.any, - onKeydown: PropTypes.func, }, methods: { onKeyDown(e) { @@ -22,8 +23,10 @@ export default { }, render() { const { prefixCls, onKeyDown, tabBarPosition, extraContent } = this; + const { class: className, style, onKeydown, ...restProps } = this.$attrs; const cls = { [`${prefixCls}-bar`]: true, + [className]: !!className, }; const topOrBottom = tabBarPosition === 'top' || tabBarPosition === 'bottom'; const tabBarExtraContentStyle = topOrBottom ? { float: 'right' } : {}; @@ -48,7 +51,9 @@ export default { class={cls} tabIndex="0" onKeydown={onKeyDown} + style={style} {...createRefHooks(this.saveRef('root'))} + {...getDataAttr(restProps)} > {newChildren} diff --git a/components/vc-tabs/src/TabBarTabsNode.jsx b/components/vc-tabs/src/TabBarTabsNode.jsx index 7abaa0814..d7046d037 100644 --- a/components/vc-tabs/src/TabBarTabsNode.jsx +++ b/components/vc-tabs/src/TabBarTabsNode.jsx @@ -8,6 +8,7 @@ function noop() {} export default { name: 'TabBarTabsNode', mixins: [BaseMixin], + inheritAttrs: false, props: { activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), panels: PropTypes.any.def([]), diff --git a/components/vc-tabs/src/TabContent.jsx b/components/vc-tabs/src/TabContent.jsx index 942216731..943bb6523 100644 --- a/components/vc-tabs/src/TabContent.jsx +++ b/components/vc-tabs/src/TabContent.jsx @@ -6,7 +6,6 @@ import { getTransformPropValue, getMarginStyle, } from './utils'; -import { getSlot } from '../../_util/props-util'; export default { name: 'TabContent', props: { @@ -17,6 +16,7 @@ export default { tabBarPosition: PropTypes.string, direction: PropTypes.string, destroyInactiveTabPane: PropTypes.bool, + children: PropTypes.any, }, computed: { classes() { @@ -52,9 +52,16 @@ export default { }, }, render() { - const { activeKey, tabBarPosition, animated, animatedWithMargin, direction, classes } = this; + const { + activeKey, + tabBarPosition, + animated, + animatedWithMargin, + direction, + classes, + children, + } = this; let style = {}; - const children = getSlot(this); if (animated && children) { const activeIndex = getActiveIndex(children, activeKey); if (activeIndex !== -1) { diff --git a/components/vc-tabs/src/Tabs.jsx b/components/vc-tabs/src/Tabs.jsx index 455654e79..6225e5551 100644 --- a/components/vc-tabs/src/Tabs.jsx +++ b/components/vc-tabs/src/Tabs.jsx @@ -7,6 +7,7 @@ import { getOptionProps } from '../../_util/props-util'; import { cloneElement } from '../../_util/vnode'; import Sentinel from './Sentinel'; import isValid from '../../_util/isValid'; +import { getDataAttr } from './utils'; function getDefaultActiveKey(props) { let activeKey; @@ -54,6 +55,10 @@ export default { } else { activeKey = getDefaultActiveKey(props); } + this.panelSentinelStart = undefined; + this.panelSentinelEnd = undefined; + this.sentinelStart = undefined; + this.sentinelEnd = undefined; return { _activeKey: activeKey, }; @@ -187,7 +192,7 @@ export default { direction, tabBarGutter, } = props; - const { class: className, onChange, ...restProps } = this.$attrs; + const { class: className, onChange, style, ...restProps } = this.$attrs; const cls = { [className]: className, [prefixCls]: 1, @@ -242,7 +247,8 @@ export default { contents.push(tabBar, sentinelStart, tabContent, sentinelEnd); } const p = { - ...restProps, + ...getDataAttr(restProps), + style, onScroll: this.onScroll, class: cls, }; diff --git a/components/vc-tabs/src/utils.js b/components/vc-tabs/src/utils.js index 2aaac3152..cd4e7e192 100644 --- a/components/vc-tabs/src/utils.js +++ b/components/vc-tabs/src/utils.js @@ -1,7 +1,8 @@ +import { isVNode } from 'vue'; export function toArray(children) { const c = []; children.forEach(child => { - if (child.data) { + if (isVNode(child)) { c.push(child); } }); @@ -100,6 +101,9 @@ function getTypeValue(start, current, end, tabNode, wrapperNode) { const { childNodes } = tabNode.parentNode; Array.prototype.some.call(childNodes, node => { + if (!node.tagName) { + return false; + } const style = window.getComputedStyle(node); if (node !== tabNode) { total += toNum(style, `margin-${start}`); diff --git a/examples/index.js b/examples/index.js index 01b007ffa..170adfd2d 100644 --- a/examples/index.js +++ b/examples/index.js @@ -2,7 +2,7 @@ import '@babel/polyfill'; import { createApp } from 'vue'; import App from './App.vue'; import Avatar from 'ant-design-vue/avatar'; -// import Breadcrumb from 'ant-design-vue/breadcrumb'; +import Breadcrumb from 'ant-design-vue/breadcrumb'; import Button from 'ant-design-vue/button'; import Comment from 'ant-design-vue/comment'; import Drawer from 'ant-design-vue/drawer'; @@ -37,6 +37,7 @@ import Dropdown from 'ant-design-vue/dropdown'; import Steps from 'ant-design-vue/steps'; import Switch from 'ant-design-vue/switch'; import Layout from 'ant-design-vue/layout'; +import Tabs from 'ant-design-vue/tabs'; import 'ant-design-vue/style.js'; const basic = { @@ -54,7 +55,7 @@ app .component('CN', { ...basic }) .component('US', { ...basic }) .use(Avatar) - // .use(Breadcrumb) + .use(Breadcrumb) .use(Button) .use(Comment) .use(ConfigProvider) @@ -87,4 +88,5 @@ app .use(Steps) .use(Switch) .use(Layout) + .use(Tabs) .mount('#app'); diff --git a/package.json b/package.json index 7aa2fade6..ba1338f13 100644 --- a/package.json +++ b/package.json @@ -160,7 +160,7 @@ "vue-i18n": "^8.3.2", "vue-infinite-scroll": "^2.0.2", "vue-jest": "^3.0.5", - "vue-loader": "^16.0.0-beta.2", + "vue-loader": "^16.0.0-beta.4", "vue-router": "^4.0.0-alpha.12", "vue-server-renderer": "^2.6.11", "vue-virtual-scroller": "^1.0.0",