feat(AddressList): add new slot item-bottom (#5629)

src/address-list/Item.tsx

@@ -10,7 +10,7 @@ import Radio from '../radio';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultSlots } from '../utils/types';
+import { DefaultSlots, ScopedSlot } from '../utils/types';
 
 export type AddressItemData = {
   id: string | number;
@@ -27,6 +27,10 @@ export type AddressItemProps = {
   defaultTagText?: string;
 };
 
+export type AddressItemSlots = DefaultSlots & {
+  bottom?: ScopedSlot;
+};
+
 export type AddressItemEvents = {
   onEdit(): void;
   onClick(): void;
@@ -38,7 +42,7 @@ const [createComponent, bem] = createNamespace('address-item');
 function AddressItem(
   h: CreateElement,
   props: AddressItemProps,
-  slots: DefaultSlots,
+  slots: AddressItemSlots,
   ctx: RenderContext<AddressItemProps>
 ) {
   const { disabled, switchable } = props;
@@ -95,18 +99,18 @@ function AddressItem(
   }
 
   return (
+    <div class={bem({ disabled })} onClick={onClick}>
       <Cell
-      class={bem({ disabled })}
         border={false}
         valueClass={bem('value')}
-      clickable={switchable && !disabled}
         scopedSlots={{
           default: genContent,
           'right-icon': genRightIcon,
         }}
-      onClick={onClick}
         {...inherit(ctx)}
       />
+      {slots.bottom?.({ ...props.data, disabled })}
+    </div>
   );
 }
 

src/address-list/README.md

@@ -104,7 +104,8 @@ export default {
 
 ### Slots
 
-| Name | Description |
-|------|------|
-| default | Custom content after list |
-| top | Custom content before list |
+| Name | Description | SlotProps |
+|------|------|------|
+| default | Custom content after list | - |
+| top | Custom content before list | - |
+| item-bottom | Custom content after list item | item |

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

@@ -104,7 +104,8 @@ export default {
 
 ### Slots
 
-| 名称 | 说明 |
-|------|------|
-| default | 在列表下方插入内容 |
-| top | 在顶部插入内容 |
+| 名称 | 说明 | SlotProps |
+|------|------|------|
+| default | 在列表下方插入内容 | - |
+| top | 在顶部插入内容 | - |
+| item-bottom | 在列表项底部插入内容 | 列表项的值 |

src/address-list/index.less

@@ -31,6 +31,7 @@
 
 .van-address-item {
   padding: @address-list-item-padding;
+  background-color: @white;
   border-radius: @border-radius-lg;
 
   &:not(:last-child) {
@@ -79,6 +80,10 @@
     transform: translate(0, -50%);
   }
 
+  .van-cell {
+    padding: 0;
+  }
+
   .van-radio__label {
     margin-left: @padding-sm;
   }

src/address-list/index.tsx

@@ -23,6 +23,7 @@ export type AddressListProps = {
 
 export type AddressListSlots = DefaultSlots & {
   top?: ScopedSlot;
+  'item-bottom'?: ScopedSlot;
 };
 
 const [createComponent, bem, t] = createNamespace('address-list');
@@ -45,6 +46,9 @@ function AddressList(
         disabled={disabled}
         switchable={props.switchable}
         defaultTagText={props.defaultTagText}
+        scopedSlots={{
+          bottom: slots['item-bottom'],
+        }}
         onSelect={() => {
           emit(ctx, disabled ? 'select-disabled' : 'select', item, index);
 

src/address-list/test/__snapshots__/demo.spec.js.snap

@@ -5,7 +5,8 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-address-list">
       <div role="radiogroup" class="van-radio-group">
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
+        <div class="van-address-item">
+          <div class="van-cell van-cell--borderless">
             <div class="van-cell__value van-cell__value--alone van-address-item__value">
               <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
                 <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 18px;"><i class="van-icon van-icon-success">
@@ -16,7 +17,9 @@ exports[`renders demo correctly 1`] = `
           </div><i class="van-icon van-icon-edit van-address-item__edit">
             <!----></i>
         </div>
-      <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
+      </div>
+      <div class="van-address-item">
+        <div class="van-cell van-cell--borderless">
           <div class="van-cell__value van-cell__value--alone van-address-item__value">
             <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
               <div class="van-radio__icon van-radio__icon--round" style="font-size: 18px;"><i class="van-icon van-icon-success">
@@ -26,14 +29,17 @@ exports[`renders demo correctly 1`] = `
             <!----></i>
         </div>
       </div>
+    </div>
     <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
-    <div class="van-cell van-cell--borderless van-address-item van-address-item--disabled">
+    <div class="van-address-item van-address-item--disabled">
+      <div class="van-cell van-cell--borderless">
         <div class="van-cell__value van-cell__value--alone van-address-item__value">
           <div class="van-address-item__name">王五 1320000000</div>
           <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
         </div><i class="van-icon van-icon-edit van-address-item__edit">
           <!----></i>
       </div>
+    </div>
     <div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
   </div>
 </div>

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

@@ -3,14 +3,17 @@
 exports[`unswitchable 1`] = `
 <div class="van-address-list">
   <div role="radiogroup" class="van-radio-group">
-    <div class="van-cell van-cell--borderless van-address-item">
+    <div class="van-address-item">
+      <div class="van-cell van-cell--borderless">
         <div class="van-cell__value van-cell__value--alone van-address-item__value">
           <div class="van-address-item__name">张三 13000000000</div>
           <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div>
         </div><i class="van-icon van-icon-edit van-address-item__edit">
           <!----></i>
       </div>
-    <div class="van-cell van-cell--borderless van-address-item">
+    </div>
+    <div class="van-address-item">
+      <div class="van-cell van-cell--borderless">
         <div class="van-cell__value van-cell__value--alone van-address-item__value">
           <div class="van-address-item__name">李四 1310000000</div>
           <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div>
@@ -18,6 +21,7 @@ exports[`unswitchable 1`] = `
           <!----></i>
       </div>
     </div>
+  </div>
   <div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
 </div>
 `;