mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(AddressList): add tag slot and doc (#8311)
This commit is contained in:
parent
70c254eee5
commit
4afdb114c1
@ -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')}>
|
||||
|
@ -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
|
||||
|
||||
|
@ -114,6 +114,7 @@ export default {
|
||||
| default | 在列表下方插入内容 | - |
|
||||
| top | 在顶部插入内容 | - |
|
||||
| item-bottom `v2.5.0` | 在列表项底部插入内容 | 列表项的值 |
|
||||
| tag | 列表项标签内容自定义 | 列表项的值 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
|
@ -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);
|
||||
|
@ -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">
|
||||
|
@ -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();
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user