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

2
components/list/index.jsx
Unescape View File

@ -280,7 +280,7 @@ const List = {
List.install = function(app) { List.install = function(app) {
app.component(List.name, List); app.component(List.name, List);
app.component(List.Item.name, List.Item); 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; export default List;

210
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> <template>
<div> <div>
<a-affix class="red"></a-affix> <a-list
<a-alert class="red"></a-alert> :data-source="[
<a-anchor class="red"> {
<a-anchor-link class="red" href="#components-anchor-demo-basic" title="Basic demo" /> name: 'Lily',
</a-anchor> },
<a-auto-complete :dataSource="[]" class="red"></a-auto-complete> {
<a-avatar class="red"></a-avatar> name: 'Lily',
<a-back-top class="red">jjj</a-back-top> },
<a-badge class="red"></a-badge> ]"
<a-breadcrumb class="red"> bordered
<a-breadcrumb-item class="red">Home</a-breadcrumb-item> >
</a-breadcrumb> <template v-slot:renderItem="{ item }">
<a-button class="red"></a-button> <a-list-item :key="`a-${item.id}`">
<a-calendar class="red"></a-calendar> <template v-slot:actions>
<a-card class="red"></a-card> <a @click="showDrawer">View Profile</a>
<a-carousel class="red"> </template>
<div> <a-list-item-meta description="Progresser XTech">
<h3>1</h3> <template v-slot:title>
</div> <a href="https://www.antdv.com/">{{ item.name }}</a>
</a-carousel> </template>
<a-checkbox class="red">Checkbox</a-checkbox> <template v-slot:avatar>
<a-checkbox-group class="red"></a-checkbox-group> <a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
<a-collapse class="red"> </template>
<a-collapse-panel class="red" key="1" header="This is panel header 1"> </a-list-item-meta>
<p>{{ text }}</p> </a-list-item>
</a-collapse-panel> </template>
<a-collapse-panel key="2" header="This is panel header 2" :disabled="false"> </a-list>
<p>{{ text }}</p> <a-drawer width="640" placement="right" :closable="false" :visible="visible" @close="onClose">
</a-collapse-panel> <p :style="[pStyle, pStyle2]">User Profile</p>
<a-collapse-panel key="3" header="This is panel header 3" disabled> <p :style="pStyle">Personal</p>
<p>{{ text }}</p> <a-row>
</a-collapse-panel> <a-col :span="12">
</a-collapse> <description-item title="Full Name" content="Lily" />
<a-date-picker class="red"></a-date-picker> </a-col>
<br /> <a-col :span="12">
<a-month-picker class="red" placeholder="Select month" /> <description-item title="Account" content="AntDesign@example.com" />
<br /> </a-col>
<a-range-picker class="red" /> </a-row>
<br /> <a-row>
<a-week-picker class="red" placeholder="Select week" /> <a-col :span="12">
<description-item title="City" content="HangZhou" />
<a-descriptions title="User Info" class="red"> </a-col>
<a-descriptions-item label="Address" class="red" <a-col :span="12">
>No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</a-descriptions-item <description-item title="Country" content="China🇨🇳" />
> </a-col>
</a-descriptions> </a-row>
<a-drawer class="red" style="margin-top: 10px"></a-drawer>> <a-row>
<a-dropdown class="red"> <a-col :span="12">
<a>ssss</a> <description-item title="Birthday" content="February 2,1900" />
</a-dropdown> </a-col>
<a-dropdown-button class="red"></a-dropdown-button> <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
>
</template>
</description-item>
</a-col>
</a-row>
</a-drawer>
</div> </div>
</template> </template>
<style scoped> <script>
.red { export default {
color: red; components: {},
}</style 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