github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: list meta name not correct

Browse Source
pull/2740/head
tanjinzhou 4 years ago
parent 4bdb241aa6
commit 03a42a5b35
3 changed files with 159 additions and 60 deletions
Show Stats Download Patch File Download Diff File

7
components/list/Item.jsx
Unescape View File

@ -21,7 +21,7 @@ export const ListItemMetaProps = {
title: PropTypes.any,
};
export const AListItemMeta = (props, { slots }) => {
export const ListItemMeta = (props, { slots }) => {
const configProvider = inject('configProvider', ConfigConsumerProps);
const getPrefixCls = configProvider.getPrefixCls;
const { prefixCls: customizePrefixCls } = props;
@ -43,9 +43,10 @@ export const AListItemMeta = (props, { slots }) => {
);
};
Object.assign(AListItemMeta, {
Object.assign(ListItemMeta, {
props: ListItemMetaProps,
__ANT_LIST_ITEM_META: true,
componentName: 'AListItemMeta',
});
function getGrid(grid, t) {
@ -55,7 +56,7 @@ function getGrid(grid, t) {
export default {
name: 'AListItem',
inheritAttrs: false,
Meta: AListItemMeta,
Meta: ListItemMeta,
props: ListItemProps,
setup() {
const listContext = inject('listContext', {});

2
components/list/index.jsx
Unescape View File

@ -280,7 +280,7 @@ const List = {
List.install = function(app) {
app.component(List.name, List);
app.component(List.Item.name, List.Item);
app.component(List.Item.Meta.name, List.Item.Meta);
app.component(List.Item.Meta.componentName, List.Item.Meta);
};
export default List;

208
examples/App.vue
Unescape View File

@ -1,60 +1,158 @@
<cn>
#### 信息预览抽屉
需要快速预览对象概要时使用，点击遮罩区关闭。
</cn>
<us>
#### Preview drawer
Use Drawer to quickly preview details of an object, such as those in a list.
</us>
```vue
<template>
<div>
<a-affix class="red"></a-affix>
<a-alert class="red"></a-alert>
<a-anchor class="red">
<a-anchor-link class="red" href="#components-anchor-demo-basic" title="Basic demo" />
</a-anchor>
<a-auto-complete :dataSource="[]" class="red"></a-auto-complete>
<a-avatar class="red"></a-avatar>
<a-back-top class="red">jjj</a-back-top>
<a-badge class="red"></a-badge>
<a-breadcrumb class="red">
<a-breadcrumb-item class="red">Home</a-breadcrumb-item>
</a-breadcrumb>
<a-button class="red"></a-button>
<a-calendar class="red"></a-calendar>
<a-card class="red"></a-card>
<a-carousel class="red">
<div>
<h3>1</h3>
</div>
</a-carousel>
<a-checkbox class="red">Checkbox</a-checkbox>
<a-checkbox-group class="red"></a-checkbox-group>
<a-collapse class="red">
<a-collapse-panel class="red" key="1" header="This is panel header 1">
<p>{{ text }}</p>
</a-collapse-panel>
<a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
<p>{{ text }}</p>
</a-collapse-panel>
<a-collapse-panel key="3" header="This is panel header 3" disabled>
<p>{{ text }}</p>
</a-collapse-panel>
</a-collapse>
<a-date-picker class="red"></a-date-picker>
<br />
<a-month-picker class="red" placeholder="Select month" />
<br />
<a-range-picker class="red" />
<br />
<a-week-picker class="red" placeholder="Select week" />
<a-descriptions title="User Info" class="red">
<a-descriptions-item label="Address" class="red"
>No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</a-descriptions-item
<a-list
:data-source="[
{
name: 'Lily',
},
{
name: 'Lily',
},
]"
bordered
>
<template v-slot:renderItem="{ item }">
<a-list-item :key="`a-${item.id}`">
<template v-slot:actions>
<a @click="showDrawer">View Profile</a>
</template>
<a-list-item-meta description="Progresser XTech">
<template v-slot:title>
<a href="https://www.antdv.com/">{{ item.name }}</a>
</template>
<template v-slot:avatar>
<a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
</template>
</a-list-item-meta>
</a-list-item>
</template>
</a-list>
<a-drawer width="640" placement="right" :closable="false" :visible="visible" @close="onClose">
<p :style="[pStyle, pStyle2]">User Profile</p>
<p :style="pStyle">Personal</p>
<a-row>
<a-col :span="12">
<description-item title="Full Name" content="Lily" />
</a-col>
<a-col :span="12">
<description-item title="Account" content="AntDesign@example.com" />
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<description-item title="City" content="HangZhou" />
</a-col>
<a-col :span="12">
<description-item title="Country" content="China🇨🇳" />
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<description-item title="Birthday" content="February 2,1900" />
</a-col>
<a-col :span="12">
<description-item title="Website" content="-" />
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<description-item
title="Message"
content="Make things as simple as possible but no simpler."
/>
</a-col>
</a-row>
<a-divider />
<p :style="pStyle">Company</p>
<a-row>
<a-col :span="12">
<description-item title="Position" content="Programmer" />
</a-col>
<a-col :span="12">
<description-item title="Responsibilities" content="Coding" />
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<description-item title="Department" content="XTech" />
</a-col>
<a-col :span="12">
<description-item title="Supervisor">
<template v-slot:content>
<a>Lin</a>
</template>
</description-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<description-item
title="Skills"
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."
/>
</a-col>
</a-row>
<a-divider />
<p :style="pStyle">Contacts</p>
<a-row>
<a-col :span="12">
<description-item title="Email" content="ant-design-vue@example.com" />
</a-col>
<a-col :span="12">
<description-item title="Phone Number" content="+86 181 0000 0000" />
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<description-item title="Github">
<template v-slot:content>
<a href="https://github.com/vueComponent/ant-design-vue"
>github.com/vueComponent/ant-design-vue</a
>
</a-descriptions>
<a-drawer class="red" style="margin-top: 10px"></a-drawer>>
<a-dropdown class="red">
<a>ssss</a>
</a-dropdown>
<a-dropdown-button class="red"></a-dropdown-button>
</template>
</description-item>
</a-col>
</a-row>
</a-drawer>
</div>
</template>
<style scoped>
.red {
color: red;
}</style
>>
<script>
export default {
components: {},
data() {
return {
visible: false,
pStyle: {
fontSize: '16px',
color: 'rgba(0,0,0,0.85)',
lineHeight: '24px',
display: 'block',
marginBottom: '16px',
},
pStyle2: {
marginBottom: '24px',
},
};
},
methods: {
showDrawer() {
this.visible = true;
},
onClose() {
this.visible = false;
},
},
};
</script>
```

Write Preview
Loading…
Cancel
Save