feat(AddressList): add tag slot and doc (#8311)

This commit is contained in:
Lindy 2021-03-09 10:07:11 +08:00 committed by GitHub
parent 70c254eee5
commit 4afdb114c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 31 additions and 5 deletions

View File

@ -29,6 +29,7 @@ export type AddressItemProps = {
export type AddressItemSlots = DefaultSlots & {
bottom?: ScopedSlot;
tag?: ScopedSlot;
};
export type AddressItemEvents = {
@ -68,6 +69,9 @@ function AddressItem(
);
function genTag() {
if (slots.tag) {
return slots.tag({ ...props.data });
}
if (props.data.isDefault && props.defaultTagText) {
return (
<Tag type="danger" round class={bem('tag')}>

View File

@ -105,11 +105,12 @@ export default {
### Slots
| Name | Description | SlotProps |
| -------------------- | ------------------------------ | --------- |
| default | Custom content after list | - |
| top | Custom content before list | - |
| item-bottom `v2.5.0` | Custom content after list item | item |
| Name | Description | SlotProps |
| -------------------- | --------------------------------- | --------- |
| default | Custom content after list | - |
| top | Custom content before list | - |
| item-bottom `v2.5.0` | Custom content after list item | item |
| tag | Custom tag conetent for list item | item |
### Less Variables

View File

@ -114,6 +114,7 @@ export default {
| default | 在列表下方插入内容 | - |
| top | 在顶部插入内容 | - |
| item-bottom `v2.5.0` | 在列表项底部插入内容 | 列表项的值 |
| tag | 列表项标签内容自定义 | 列表项的值 |
### 样式变量

View File

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

View File

@ -1,5 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render tag slot correctly 1`] = `
<div class="van-address-list">
<div role="radiogroup" class="van-radio-group"></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">
<div class="van-button__content"><span class="van-button__text">新增地址</span></div>
</button></div>
</div>
`;
exports[`unswitchable 1`] = `
<div class="van-address-list">
<div role="radiogroup" class="van-radio-group">

View File

@ -62,3 +62,12 @@ test('click-item event', () => {
expect(onClickItem).toHaveBeenCalledTimes(1);
});
test('should render tag slot correctly', () => {
const wrapper = mount(AddressList, {
scopedSlots: {
tag: () => 'Custom Tag',
},
});
expect(wrapper.html()).toMatchSnapshot();
});