diff --git a/src/goods-action-icon/index.tsx b/src/goods-action-icon/index.tsx index 9ab055bfc..0f7d1a967 100644 --- a/src/goods-action-icon/index.tsx +++ b/src/goods-action-icon/index.tsx @@ -5,7 +5,7 @@ import { functionalRoute, routeProps, RouteProps } from '../utils/router'; // Types import { CreateElement, RenderContext } from 'vue/types'; -import { DefaultSlots } from '../utils/types'; +import { DefaultSlots, ScopedSlot } from '../utils/types'; export type GoodsActionIconProps = RouteProps & { icon: string; @@ -14,12 +14,16 @@ export type GoodsActionIconProps = RouteProps & { iconClass?: any; }; +export type GoodsActionIconSlots = DefaultSlots & { + icon?: ScopedSlot; +}; + const [createComponent, bem] = createNamespace('goods-action-icon'); function GoodsActionIcon( h: CreateElement, props: GoodsActionIconProps, - slots: DefaultSlots, + slots: GoodsActionIconSlots, ctx: RenderContext ) { function onClick(event: Event) { @@ -35,12 +39,16 @@ function GoodsActionIcon( onClick={onClick} {...inherit(ctx)} > - + {slots.icon ? ( +
{slots.icon()}
+ ) : ( + + )} {slots.default ? slots.default() : props.text} ); diff --git a/src/goods-action/README.md b/src/goods-action/README.md index bbc9750f1..1b5a6ae7f 100644 --- a/src/goods-action/README.md +++ b/src/goods-action/README.md @@ -119,3 +119,16 @@ Use `info` prop to show messages in upper right corner of icon | url | Link | `String` | - | | to | Target route of the link, same as to of vue-router | `String | Object` | - | | replace | If true, the navigation will not leave a history record | `Boolean` | `false` | + +### GoodsActionIcon Slots + +| Name | Description | +|------|------| +| default | Text | +| icon | Custom icon | + +### GoodsActionButton Slots + +| Name | Description | +|------|------| +| default | Button content | diff --git a/src/goods-action/README.zh-CN.md b/src/goods-action/README.zh-CN.md index 394ad5e2a..92ee8f190 100644 --- a/src/goods-action/README.zh-CN.md +++ b/src/goods-action/README.zh-CN.md @@ -118,3 +118,16 @@ export default { | url | 跳转链接 | `String` | - | - | | to | 路由跳转对象,同 vue-router 的 to 属性 | `String | Object` | - | - | | replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - | + +### GoodsActionIcon Slots + +| 名称 | 说明 | +|------|------| +| default | 文本内容 | +| icon | 自定义图标 | + +### GoodsActionButton Slots + +| 名称 | 说明 | +|------|------| +| default | 按钮显示内容 | diff --git a/src/goods-action/test/__snapshots__/index.spec.js.snap b/src/goods-action/test/__snapshots__/index.spec.js.snap index 33a411174..dc6e8b4ca 100644 --- a/src/goods-action/test/__snapshots__/index.spec.js.snap +++ b/src/goods-action/test/__snapshots__/index.spec.js.snap @@ -9,3 +9,9 @@ exports[`Icon render default slot 1`] = ` Default Content `; + +exports[`Icon render icon slot 1`] = ` +
+
Custom Icon
Text +
+`; diff --git a/src/goods-action/test/index.spec.js b/src/goods-action/test/index.spec.js index 9724e408a..a93294be7 100644 --- a/src/goods-action/test/index.spec.js +++ b/src/goods-action/test/index.spec.js @@ -49,3 +49,18 @@ test('Icon render default slot', () => { expect(wrapper).toMatchSnapshot(); }); + +test('Icon render icon slot', () => { + const wrapper = mount({ + render(h) { + return h(Icon, { + scopedSlots: { + default: () => 'Text', + icon: () => 'Custom Icon' + } + }); + } + }); + + expect(wrapper).toMatchSnapshot(); +});