feat(AddressList): add tag slots (#8292)

src/address-list/AddressList.tsx

@@ -68,6 +68,7 @@ export default defineComponent({
         <AddressListItem
           v-slots={{
             bottom: slots['item-bottom'],
+            tag: slots['tag'],
           }}
           key={item.id}
           address={item}

src/address-list/AddressListItem.tsx

@@ -55,6 +55,9 @@ export default defineComponent({
     );
 
     const renderTag = () => {
+      if (slots.tag) {
+        return slots.tag({ ...props.address });
+      }
       if (props.address.isDefault && props.defaultTagText) {
         return (
           <Tag type="danger" round class={bem('tag')}>

src/address-list/README.md

@@ -108,11 +108,12 @@ export default {
 
 ### Slots
 
-| Name        | Description                    | SlotProps       |
-| ----------- | ------------------------------ | --------------- |
-| default     | Custom content after list      | -               |
-| top         | Custom content before list     | -               |
-| item-bottom | Custom content after list item | _item: Address_ |
+| Name        | Description                       | SlotProps       |
+| ----------- | --------------------------------- | --------------- |
+| default     | Custom content after list         | -               |
+| top         | Custom content before list        | -               |
+| item-bottom | Custom content after list item    | _item: Address_ |
+| tag         | Custom tag conetent for list item | _item: Address_ |
 
 ### Less Variables
 

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

@@ -117,6 +117,7 @@ export default {
 | default     | 在列表下方插入内容   | -               |
 | top         | 在顶部插入内容       | -               |
 | item-bottom | 在列表项底部插入内容 | _item: Address_ |
+| tag         | 列表项标签内容自定义 | _item: Address_ |
 
 ### 样式变量
 

src/address-list/test/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render tag  slot correctly 1`] = `
+<div class="van-address-list">
+  <div class="van-radio-group"
+       role="radiogroup"
+  >
+  </div>
+  <div class="van-address-list__bottom">
+    <button type="button"
+            class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"
+    >
+      <div class="van-button__content">
+        <span class="van-button__text">
+          Add new address
+        </span>
+      </div>
+    </button>
+  </div>
+</div>
+`;

src/address-list/test/index.spec.ts

@@ -50,3 +50,12 @@ test('should emit click-item event when item is clicked', () => {
 
   expect(wrapper.emitted('click-item')![0]).toEqual([list[0], 0]);
 });
+
+test('should render tag  slot correctly', () => {
+  const wrapper = mount(AddressList, {
+    slots: {
+      tag: () => 'Custom Tag',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});