blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
rex 2020-02-07 10:07:39 +08:00 committed by GitHub
parent e42f3e79c2
commit d97e679e68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 82 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/address-list/Item.tsx
View File

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

9
src/address-list/README.md
View File

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

9
src/address-list/README.zh-CN.md
View File

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

5
src/address-list/index.less
View File

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

4
src/address-list/index.tsx
View File

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

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

@ -5,34 +5,40 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-address-list"> <div class="van-address-list">
<div role="radiogroup" class="van-radio-group"> <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__value van-cell__value--alone van-address-item__value"> <div class="van-cell van-cell--borderless">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio"> <div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 18px;"><i class="van-icon van-icon-success"> <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<!----></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-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>
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span> </div><i class="van-icon van-icon-edit van-address-item__edit">
</div> <!----></i>
</div><i class="van-icon van-icon-edit van-address-item__edit"> </div>
<!----></i>
</div> </div>
<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__value van-cell__value--alone van-address-item__value"> <div class="van-cell van-cell--borderless">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio"> <div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-radio__icon van-radio__icon--round" style="font-size: 18px;"><i class="van-icon van-icon-success"> <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<!----></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 class="van-radio__icon van-radio__icon--round" style="font-size: 18px;"><i class="van-icon van-icon-success">
</div> <!----></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><i class="van-icon van-icon-edit van-address-item__edit"> </div>
<!----></i> </div><i class="van-icon van-icon-edit van-address-item__edit">
<!----></i>
</div>
</div> </div>
</div> </div>
<div class="van-address-list__disabled-text">以下地址超出配送范围</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__value van-cell__value--alone van-address-item__value"> <div class="van-cell van-cell--borderless">
<div class="van-address-item__name">王五 1320000000</div> <div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div> <div class="van-address-item__name">王五 1320000000</div>
</div><i class="van-icon van-icon-edit van-address-item__edit"> <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
<!----></i> </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> <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>

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

@ -3,19 +3,23 @@
exports[`unswitchable 1`] = ` exports[`unswitchable 1`] = `
<div class="van-address-list"> <div class="van-address-list">
<div role="radiogroup" class="van-radio-group"> <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__value van-cell__value--alone van-address-item__value"> <div class="van-cell van-cell--borderless">
<div class="van-address-item__name">张三 13000000000</div> <div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div> <div class="van-address-item__name">张三 13000000000</div>
</div><i class="van-icon van-icon-edit van-address-item__edit"> <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div>
<!----></i> </div><i class="van-icon van-icon-edit van-address-item__edit">
<!----></i>
</div>
</div> </div>
<div class="van-cell van-cell--borderless van-address-item"> <div class="van-address-item">
<div class="van-cell__value van-cell__value--alone van-address-item__value"> <div class="van-cell van-cell--borderless">
<div class="van-address-item__name">李四 1310000000</div> <div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div> <div class="van-address-item__name">李四 1310000000</div>
</div><i class="van-icon van-icon-edit van-address-item__edit"> <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div>
<!----></i> </div><i class="van-icon van-icon-edit van-address-item__edit">
<!----></i>
</div>
</div> </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 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>