From da207c8d9ba56d5c0969c01d60d2af99d5be5e95 Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Wed, 24 Jun 2020 17:25:47 +0800 Subject: [PATCH] fix: card --- breakChange-2.x.md | 4 +++ components/card/Card.jsx | 26 +++++++++++-------- components/card/Meta.jsx | 1 + .../__snapshots__/index.test.js.snap | 9 ++++++- components/card/__tests__/index.test.js | 5 +--- examples/index.js | 2 ++ 6 files changed, 31 insertions(+), 16 deletions(-) diff --git a/breakChange-2.x.md b/breakChange-2.x.md index ed695ee48..017e83588 100644 --- a/breakChange-2.x.md +++ b/breakChange-2.x.md @@ -69,3 +69,7 @@ v-model -> v-model:checked v-model -> v-model:activeKey renderTabBar({props, on, style, class}, DefaultTabBar) -> {DefaultTabBar, ...props} 多参数改成单参数并且扁平化处理 + +## card + +tabList[{scopedSlots}] -> tabList[{slots}] diff --git a/components/card/Card.jsx b/components/card/Card.jsx index c00c98be3..82aedc155 100644 --- a/components/card/Card.jsx +++ b/components/card/Card.jsx @@ -1,9 +1,9 @@ -import { inject } from 'vue'; +import { inject, isVNode } from 'vue'; import Tabs from '../tabs'; import Row from '../row'; import Col from '../col'; import PropTypes from '../_util/vue-types'; -import { getComponent, filterEmpty, getSlot } from '../_util/props-util'; +import { getComponent, getSlot, isEmptyElement } from '../_util/props-util'; import BaseMixin from '../_util/BaseMixin'; import { ConfigConsumerProps } from '../config-provider'; import isPlainObject from 'lodash/isPlainObject'; @@ -28,6 +28,7 @@ export default { tabBarExtraContent: PropTypes.any, activeTabKey: PropTypes.string, defaultActiveTabKey: PropTypes.string, + cover: PropTypes.any, }, setup() { return { @@ -41,11 +42,13 @@ export default { }, methods: { getAction(actions) { - const actionList = actions.map((action, index) => ( - <li style={{ width: `${100 / actions.length}%` }} key={`action-${index}`}> - <span>{action}</span> - </li> - )); + const actionList = actions.map((action, index) => + (isVNode(action) && !isEmptyElement(action)) || !isVNode(action) ? ( + <li style={{ width: `${100 / actions.length}%` }} key={`action-${index}`}> + <span>{action}</span> + </li> + ) : null, + ); return actionList; }, onTabChange(key) { @@ -75,6 +78,7 @@ export default { activeTabKey, defaultActiveTabKey, } = this.$props; + const { $slots } = this; const children = getSlot(this); const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('card', customizePrefixCls); @@ -155,9 +159,9 @@ export default { tabList && tabList.length ? ( <Tabs {...tabsProps}> {tabList.map(item => { - const { tab: temp, children = {} } = item; - const name = children.tab; - const tab = temp !== undefined ? temp : children[name] ? children[name](item) : null; + const { tab: temp, scopedSlots = {}, slots = {} } = item; + const name = slots.tab || scopedSlots.tab; + const tab = temp !== undefined ? temp : $slots[name] ? $slots[name](item) : null; return <TabPane tab={tab} key={item.key} disabled={item.disabled} />; })} </Tabs> @@ -183,7 +187,7 @@ export default { {loading ? loadingBlock : children} </div> ); - const actions = filterEmpty(getComponent(this, 'action')); + const actions = getComponent(this, 'actions'); const actionDom = actions && actions.length ? ( <ul class={`${prefixCls}-actions`}>{this.getAction(actions)}</ul> diff --git a/components/card/Meta.jsx b/components/card/Meta.jsx index d2b302ec9..85c64c8c9 100644 --- a/components/card/Meta.jsx +++ b/components/card/Meta.jsx @@ -9,6 +9,7 @@ export default { prefixCls: PropTypes.string, title: PropTypes.any, description: PropTypes.any, + avatar: PropTypes.any, }, setup() { return { diff --git a/components/card/__tests__/__snapshots__/index.test.js.snap b/components/card/__tests__/__snapshots__/index.test.js.snap index 07ef30417..96f5f3dd0 100644 --- a/components/card/__tests__/__snapshots__/index.test.js.snap +++ b/components/card/__tests__/__snapshots__/index.test.js.snap @@ -2,6 +2,8 @@ exports[`Card should still have padding when card which set padding to 0 is loading 1`] = ` <div class="ant-card ant-card-loading ant-card-bordered"> + <!----> + <!----> <div class="ant-card-body" style="padding: 0px;"> <div class="ant-card-loading-content"> <div class="ant-row" style="margin-left: -4px; margin-right: -4px;"> @@ -46,6 +48,7 @@ exports[`Card should still have padding when card which set padding to 0 is load </div> </div> </div> + <!----> </div> `; @@ -54,11 +57,15 @@ exports[`Card title should be vertically aligned 1`] = ` <div class="ant-card-head"> <div class="ant-card-head-wrapper"> <div class="ant-card-head-title">Card title</div> - <div class="ant-card-extra"><button type="button" class="ant-btn"><span>Button</span></button></div> + <div class="ant-card-extra"><button class="ant-btn" type="button"> + <!----><span>Button</span></button></div> </div> + <!----> </div> + <!----> <div class="ant-card-body"> <p>Card content</p> </div> + <!----> </div> `; diff --git a/components/card/__tests__/index.test.js b/components/card/__tests__/index.test.js index cf2cead1b..4420df050 100644 --- a/components/card/__tests__/index.test.js +++ b/components/card/__tests__/index.test.js @@ -64,10 +64,7 @@ describe('Card', () => { sync: false, }, ); - wrapper - .findAll('.ant-tabs-tab') - .at(1) - .trigger('click'); + wrapper.findAll('.ant-tabs-tab')[1].trigger('click'); expect(onTabChange).toHaveBeenCalledWith('tab2'); }); diff --git a/examples/index.js b/examples/index.js index 170adfd2d..bcfe6501d 100644 --- a/examples/index.js +++ b/examples/index.js @@ -38,6 +38,7 @@ 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 Card from 'ant-design-vue/card'; import 'ant-design-vue/style.js'; const basic = { @@ -89,4 +90,5 @@ app .use(Switch) .use(Layout) .use(Tabs) + .use(Card) .mount('#app');