feat: address-list增加radio、edit、delete处的插槽

src/address-list/Item.tsx

@@ -6,7 +6,7 @@ import Radio from '../radio';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultSlots } from '../utils/types';
+import { ScopedSlot, DefaultSlots } from '../utils/types';
 
 export type AddressItemData = {
   id: string | number;
@@ -20,6 +20,12 @@ export type AddressItemProps = {
   disabled?: boolean;
 };
 
+export type AddressItemSlots = DefaultSlots & {
+  radioIcon?: ScopedSlot;
+  edit?: ScopedSlot;
+  delete?: ScopedSlot;
+};
+
 export type AddressItemEvents = {
   onEdit(): void;
   onClick(): void;
@@ -32,7 +38,7 @@ const [createComponent, bem] = createNamespace('address-item');
 function AddressItem(
   h: CreateElement,
   props: AddressItemProps,
-  slots: DefaultSlots,
+  slots: AddressItemSlots,
   ctx: RenderContext<AddressItemProps>
 ) {
   const { disabled } = props;
@@ -47,22 +53,26 @@ function AddressItem(
 
   const renderRightIcon = () => (
     <div class={bem('icons-wrapper')}>
-      <Icon
-        name="edit"
+      <span
+        style="display: flex"
         class={bem('edit')}
         onClick={(event: Event) => {
           event.stopPropagation();
           emit(ctx, 'edit');
         }}
-      />
-      <Icon
-        name="delete"
+      >
+        {slots.edit ? slots.edit() : <Icon name="edit" />}
+      </span>
+      <span
+        style="display: flex"
         class={bem('delete')}
         onClick={(event: Event) => {
           event.stopPropagation();
           emit(ctx, 'delete');
         }}
-      />
+      >
+        {slots.delete ? slots.delete() : <Icon name="delete" />}
+      </span>
     </div>
   );
 
@@ -74,7 +84,12 @@ function AddressItem(
         <div class={bem('address')}>{data.address}</div>
       </div>,
       <div class={bem('bar')}>
-        <Radio name={data.id} onClick={onSetDefault} class={bem('set-default')}>
+        <Radio
+          name={data.id}
+          onClick={onSetDefault}
+          class={bem('set-default')}
+          scopedSlots={{ icon: slots.radioIcon }}
+        >
           设为默认
         </Radio>
         {renderRightIcon()}
@@ -98,7 +113,7 @@ function AddressItem(
 
 AddressItem.props = {
   data: Object,
-  disabled: Boolean,
+  disabled: Boolean
 };
 
 export default createComponent<AddressItemProps, AddressItemEvents>(AddressItem);

src/address-list/README.md

@@ -100,7 +100,10 @@ export default {
 
 ### Slots
 
-| Name | Description |
-|------|------|
+| Name | Description | SlotProps |
+|------|------|------|
 | default | Custom content after list |
 | top | Custom content before list |
+| radioIcon | Custom radio icon | checked: checked or not
+| edit | Custom edit icon |
+| delete | Custom delete icon |

src/address-list/README.zh-CN.md

@@ -112,7 +112,10 @@ export default {
 
 ### Slots
 
-| 名称 | 说明 |
-|------|------|
+| 名称 | 说明 | SlotProps |
+|------|------|------|
 | default | 在列表下方插入内容 |
 | top | 在顶部插入内容 |
+| radioIcon | 自定义radio图标 | checked: 是否为选中状态
+| edit | 自定义编辑icon |
+| delete | 自定义删除icon |

src/address-list/index.tsx

@@ -2,11 +2,11 @@ import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import Button from '../button';
 import RadioGroup from '../radio-group';
-import AddressItem, { AddressItemData } from './Item';
+import AddressItem, { AddressItemData, AddressItemSlots } from './Item';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
-import { ScopedSlot, DefaultSlots } from '../utils/types';
+import { ScopedSlot } from '../utils/types';
 
 export type AddressListProps = {
   value?: string | number;
@@ -16,7 +16,7 @@ export type AddressListProps = {
   disabledList?: AddressItemData[];
 };
 
-export type AddressListSlots = DefaultSlots & {
+export type AddressListSlots = AddressItemSlots & {
   top?: ScopedSlot;
 };
 
@@ -38,6 +38,11 @@ function AddressList(
         data={item}
         key={item.id}
         disabled={disabled}
+        scopedSlots={{
+          radioIcon: slots.radioIcon,
+          edit: slots.edit,
+          delete: slots.delete,
+        }}
         onEdit={() => {
           emit(ctx, disabled ? 'edit-disabled' : 'edit', item, index);
         }}