[new feature] GoodsActionIcon: add icon slot (#3705)

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<GoodsActionIconProps>
 ) {
   function onClick(event: Event) {
@@ -35,12 +39,16 @@ function GoodsActionIcon(
       onClick={onClick}
       {...inherit(ctx)}
     >
-      <Icon
+      {slots.icon ? (
-        class={[bem('icon'), props.iconClass]}
+        <div class={bem('icon')}>{slots.icon()}</div>
-        tag="div"
+      ) : (
-        info={props.info}
+        <Icon
-        name={props.icon}
+          class={[bem('icon'), props.iconClass]}
-      />
+          tag="div"
+          info={props.info}
+          name={props.icon}
+        />
+      )}
       {slots.default ? slots.default() : props.text}
     </div>
   );

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 |

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 | 按钮显示内容 |

src/goods-action/test/__snapshots__/index.spec.js.snap

@@ -9,3 +9,9 @@ exports[`Icon render default slot 1`] = `
   </div>Default Content
 </div>
 `;
+
+exports[`Icon render icon slot 1`] = `
+<div role="button" tabindex="0" class="van-goods-action-icon van-hairline">
+  <div class="van-goods-action-icon__icon">Custom Icon</div>Text
+</div>
+`;

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();
+});