Skip to content

Commit 03a42a5

Browse files
tangjinzhoutangjinzhou
committed
fix: list meta name not correct
1 parent 4bdb241 commit 03a42a5

File tree

3 files changed

+159
-60
lines changed

3 files changed

+159
-60
lines changed

‎components/list/Item.jsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const ListItemMetaProps = {
2121
title: PropTypes.any,
2222
};
2323

24-
export const AListItemMeta = (props, { slots }) => {
24+
export const ListItemMeta = (props, { slots }) => {
2525
const configProvider = inject('configProvider', ConfigConsumerProps);
2626
const getPrefixCls = configProvider.getPrefixCls;
2727
const { prefixCls: customizePrefixCls } = props;
@@ -43,9 +43,10 @@ export const AListItemMeta = (props, { slots }) => {
4343
);
4444
};
4545

46-
Object.assign(AListItemMeta, {
46+
Object.assign(ListItemMeta, {
4747
props: ListItemMetaProps,
4848
__ANT_LIST_ITEM_META: true,
49+
componentName: 'AListItemMeta',
4950
});
5051

5152
function getGrid(grid, t) {
@@ -55,7 +56,7 @@ function getGrid(grid, t) {
5556
export default {
5657
name: 'AListItem',
5758
inheritAttrs: false,
58-
Meta: AListItemMeta,
59+
Meta: ListItemMeta,
5960
props: ListItemProps,
6061
setup() {
6162
const listContext = inject('listContext', {});

‎components/list/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,7 @@ const List = {
280280
List.install = function(app) {
281281
app.component(List.name, List);
282282
app.component(List.Item.name, List.Item);
283-
app.component(List.Item.Meta.name, List.Item.Meta);
283+
app.component(List.Item.Meta.componentName, List.Item.Meta);
284284
};
285285

286286
export default List;

‎examples/App.vue

+154-56
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,158 @@
1+
<cn>
2+
#### 信息预览抽屉
3+
需要快速预览对象概要时使用，点击遮罩区关闭。
4+
</cn>
5+
6+
<us>
7+
#### Preview drawer
8+
Use Drawer to quickly preview details of an object, such as those in a list.
9+
</us>
10+
11+
```vue
112
<template>
213
<div>
3-
<a-affix class="red"></a-affix>
4-
<a-alert class="red"></a-alert>
5-
<a-anchor class="red">
6-
<a-anchor-link class="red" href="#components-anchor-demo-basic" title="Basic demo" />
7-
</a-anchor>
8-
<a-auto-complete :dataSource="[]" class="red"></a-auto-complete>
9-
<a-avatar class="red"></a-avatar>
10-
<a-back-top class="red">jjj</a-back-top>
11-
<a-badge class="red"></a-badge>
12-
<a-breadcrumb class="red">
13-
<a-breadcrumb-item class="red">Home</a-breadcrumb-item>
14-
</a-breadcrumb>
15-
<a-button class="red"></a-button>
16-
<a-calendar class="red"></a-calendar>
17-
<a-card class="red"></a-card>
18-
<a-carousel class="red">
19-
<div>
20-
<h3>1</h3>
21-
</div>
22-
</a-carousel>
23-
<a-checkbox class="red">Checkbox</a-checkbox>
24-
<a-checkbox-group class="red"></a-checkbox-group>
25-
<a-collapse class="red">
26-
<a-collapse-panel class="red" key="1" header="This is panel header 1">
27-
<p>{{ text }}</p>
28-
</a-collapse-panel>
29-
<a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
30-
<p>{{ text }}</p>
31-
</a-collapse-panel>
32-
<a-collapse-panel key="3" header="This is panel header 3" disabled>
33-
<p>{{ text }}</p>
34-
</a-collapse-panel>
35-
</a-collapse>
36-
<a-date-picker class="red"></a-date-picker>
37-
<br />
38-
<a-month-picker class="red" placeholder="Select month" />
39-
<br />
40-
<a-range-picker class="red" />
41-
<br />
42-
<a-week-picker class="red" placeholder="Select week" />
43-
44-
<a-descriptions title="User Info" class="red">
45-
<a-descriptions-item label="Address" class="red"
46-
>No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</a-descriptions-item
47-
>
48-
</a-descriptions>
49-
<a-drawer class="red" style="margin-top: 10px"></a-drawer>>
50-
<a-dropdown class="red">
51-
<a>ssss</a>
52-
</a-dropdown>
53-
<a-dropdown-button class="red"></a-dropdown-button>
14+
<a-list
15+
:data-source="[
16+
{
17+
name: 'Lily',
18+
},
19+
{
20+
name: 'Lily',
21+
},
22+
]"
23+
bordered
24+
>
25+
<template v-slot:renderItem="{ item }">
26+
<a-list-item :key="`a-${item.id}`">
27+
<template v-slot:actions>
28+
<a @click="showDrawer">View Profile</a>
29+
</template>
30+
<a-list-item-meta description="Progresser XTech">
31+
<template v-slot:title>
32+
<a href="https://www.antdv.com/">{{ item.name }}</a>
33+
</template>
34+
<template v-slot:avatar>
35+
<a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
36+
</template>
37+
</a-list-item-meta>
38+
</a-list-item>
39+
</template>
40+
</a-list>
41+
<a-drawer width="640" placement="right" :closable="false" :visible="visible" @close="onClose">
42+
<p :style="[pStyle, pStyle2]">User Profile</p>
43+
<p :style="pStyle">Personal</p>
44+
<a-row>
45+
<a-col :span="12">
46+
<description-item title="Full Name" content="Lily" />
47+
</a-col>
48+
<a-col :span="12">
49+
<description-item title="Account" content="[email protected]" />
50+
</a-col>
51+
</a-row>
52+
<a-row>
53+
<a-col :span="12">
54+
<description-item title="City" content="HangZhou" />
55+
</a-col>
56+
<a-col :span="12">
57+
<description-item title="Country" content="China🇨🇳" />
58+
</a-col>
59+
</a-row>
60+
<a-row>
61+
<a-col :span="12">
62+
<description-item title="Birthday" content="February 2,1900" />
63+
</a-col>
64+
<a-col :span="12">
65+
<description-item title="Website" content="-" />
66+
</a-col>
67+
</a-row>
68+
<a-row>
69+
<a-col :span="12">
70+
<description-item
71+
title="Message"
72+
content="Make things as simple as possible but no simpler."
73+
/>
74+
</a-col>
75+
</a-row>
76+
<a-divider />
77+
<p :style="pStyle">Company</p>
78+
<a-row>
79+
<a-col :span="12">
80+
<description-item title="Position" content="Programmer" />
81+
</a-col>
82+
<a-col :span="12">
83+
<description-item title="Responsibilities" content="Coding" />
84+
</a-col>
85+
</a-row>
86+
<a-row>
87+
<a-col :span="12">
88+
<description-item title="Department" content="XTech" />
89+
</a-col>
90+
<a-col :span="12">
91+
<description-item title="Supervisor">
92+
<template v-slot:content>
93+
<a>Lin</a>
94+
</template>
95+
</description-item>
96+
</a-col>
97+
</a-row>
98+
<a-row>
99+
<a-col :span="24">
100+
<description-item
101+
title="Skills"
102+
content="C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc."
103+
/>
104+
</a-col>
105+
</a-row>
106+
<a-divider />
107+
<p :style="pStyle">Contacts</p>
108+
<a-row>
109+
<a-col :span="12">
110+
<description-item title="Email" content="[email protected]" />
111+
</a-col>
112+
<a-col :span="12">
113+
<description-item title="Phone Number" content="+86 181 0000 0000" />
114+
</a-col>
115+
</a-row>
116+
<a-row>
117+
<a-col :span="24">
118+
<description-item title="Github">
119+
<template v-slot:content>
120+
<a href="https://github.com/vueComponent/ant-design-vue"
121+
>github.com/vueComponent/ant-design-vue</a
122+
>
123+
</template>
124+
</description-item>
125+
</a-col>
126+
</a-row>
127+
</a-drawer>
54128
</div>
55129
</template>
56-
<style scoped>
57-
.red {
58-
color: red;
59-
}</style
60-
>>
130+
<script>
131+
export default {
132+
components: {},
133+
data() {
134+
return {
135+
visible: false,
136+
pStyle: {
137+
fontSize: '16px',
138+
color: 'rgba(0,0,0,0.85)',
139+
lineHeight: '24px',
140+
display: 'block',
141+
marginBottom: '16px',
142+
},
143+
pStyle2: {
144+
marginBottom: '24px',
145+
},
146+
};
147+
},
148+
methods: {
149+
showDrawer() {
150+
this.visible = true;
151+
},
152+
onClose() {
153+
this.visible = false;
154+
},
155+
},
156+
};
157+
</script>
158+
```

0 commit comments

Comments
 (0)