mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-25 10:56:35 +08:00
feat(AddressList): add tag slots (#8292)
This commit is contained in:
parent
e540876398
commit
0c740b6962
@ -68,6 +68,7 @@ export default defineComponent({
|
|||||||
<AddressListItem
|
<AddressListItem
|
||||||
v-slots={{
|
v-slots={{
|
||||||
bottom: slots['item-bottom'],
|
bottom: slots['item-bottom'],
|
||||||
|
tag: slots['tag'],
|
||||||
}}
|
}}
|
||||||
key={item.id}
|
key={item.id}
|
||||||
address={item}
|
address={item}
|
||||||
|
@ -55,6 +55,9 @@ export default defineComponent({
|
|||||||
);
|
);
|
||||||
|
|
||||||
const renderTag = () => {
|
const renderTag = () => {
|
||||||
|
if (slots.tag) {
|
||||||
|
return slots.tag({ ...props.address });
|
||||||
|
}
|
||||||
if (props.address.isDefault && props.defaultTagText) {
|
if (props.address.isDefault && props.defaultTagText) {
|
||||||
return (
|
return (
|
||||||
<Tag type="danger" round class={bem('tag')}>
|
<Tag type="danger" round class={bem('tag')}>
|
||||||
|
@ -109,10 +109,11 @@ export default {
|
|||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
| Name | Description | SlotProps |
|
| 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: Address_ |
|
| item-bottom | Custom content after list item | _item: Address_ |
|
||||||
|
| tag | Custom tag conetent for list item | _item: Address_ |
|
||||||
|
|
||||||
### Less Variables
|
### Less Variables
|
||||||
|
|
||||||
|
@ -117,6 +117,7 @@ export default {
|
|||||||
| default | 在列表下方插入内容 | - |
|
| default | 在列表下方插入内容 | - |
|
||||||
| top | 在顶部插入内容 | - |
|
| top | 在顶部插入内容 | - |
|
||||||
| item-bottom | 在列表项底部插入内容 | _item: Address_ |
|
| item-bottom | 在列表项底部插入内容 | _item: Address_ |
|
||||||
|
| tag | 列表项标签内容自定义 | _item: Address_ |
|
||||||
|
|
||||||
### 样式变量
|
### 样式变量
|
||||||
|
|
||||||
|
21
src/address-list/test/__snapshots__/index.spec.ts.snap
Normal file
21
src/address-list/test/__snapshots__/index.spec.ts.snap
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should render tag slot correctly 1`] = `
|
||||||
|
<div class="van-address-list">
|
||||||
|
<div class="van-radio-group"
|
||||||
|
role="radiogroup"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="van-address-list__bottom">
|
||||||
|
<button type="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">
|
||||||
|
Add new address
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
@ -50,3 +50,12 @@ test('should emit click-item event when item is clicked', () => {
|
|||||||
|
|
||||||
expect(wrapper.emitted('click-item')![0]).toEqual([list[0], 0]);
|
expect(wrapper.emitted('click-item')![0]).toEqual([list[0], 0]);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('should render tag slot correctly', () => {
|
||||||
|
const wrapper = mount(AddressList, {
|
||||||
|
slots: {
|
||||||
|
tag: () => 'Custom Tag',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user