mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(AddressList): add new slot item-bottom (#5629)
This commit is contained in:
rex
GitHub
parent
e42f3e79c2
commit
d97e679e68
@ -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 (
|
||||
<Cell
|
||||
class={bem({ disabled })}
|
||||
border={false}
|
||||
valueClass={bem('value')}
|
||||
clickable={switchable && !disabled}
|
||||
scopedSlots={{
|
||||
default: genContent,
|
||||
'right-icon': genRightIcon,
|
||||
}}
|
||||
onClick={onClick}
|
||||
{...inherit(ctx)}
|
||||
/>
|
||||
<div class={bem({ disabled })} onClick={onClick}>
|
||||
<Cell
|
||||
border={false}
|
||||
valueClass={bem('value')}
|
||||
scopedSlots={{
|
||||
default: genContent,
|
||||
'right-icon': genRightIcon,
|
||||
}}
|
||||
{...inherit(ctx)}
|
||||
/>
|
||||
{slots.bottom?.({ ...props.data, disabled })}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -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 |
|
||||
|
||||
@ -104,7 +104,8 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 在列表下方插入内容 |
|
||||
| top | 在顶部插入内容 |
|
||||
| 名称 | 说明 | SlotProps |
|
||||
|------|------|------|
|
||||
| default | 在列表下方插入内容 | - |
|
||||
| top | 在顶部插入内容 | - |
|
||||
| item-bottom | 在列表项底部插入内容 | 列表项的值 |
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -5,34 +5,40 @@ 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-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">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三 13000000000<span class="van-tag van-tag--round van-tag--danger van-address-item__tag">默认</span>
|
||||
<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">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三 13000000000<span class="van-tag van-tag--round van-tag--danger van-address-item__tag">默认</span>
|
||||
</div>
|
||||
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
|
||||
</div>
|
||||
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
|
||||
</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
|
||||
<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">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四 1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
|
||||
</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
<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">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四 1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
|
||||
</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></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-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 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>
|
||||
|
||||
@ -3,19 +3,23 @@
|
||||
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-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 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>
|
||||
<div class="van-cell van-cell--borderless van-address-item">
|
||||
<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>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
<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>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user