71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
Vue
<docs>
|
|
---
|
|
order: 1
|
|
title:
|
|
zh-CN: ้
ๅ List ็ปไปถ
|
|
en-US: Usage with list
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
้
ๅ List ็ปไปถๅฑ็ฐ่ฏ่ฎบๅ่กจใ
|
|
|
|
## en-US
|
|
|
|
Displaying a series of comments using the `antd` List Component.
|
|
|
|
</docs>
|
|
|
|
<template>
|
|
<a-list
|
|
class="comment-list"
|
|
:header="`${data.length} replies`"
|
|
item-layout="horizontal"
|
|
:data-source="data"
|
|
>
|
|
<template #renderItem="{ item }">
|
|
<a-list-item>
|
|
<a-comment :author="item.author" :avatar="item.avatar">
|
|
<template #actions>
|
|
<span v-for="(action, index) in item.actions" :key="index">{{ action }}</span>
|
|
</template>
|
|
<template #content>
|
|
<p>
|
|
{{ item.content }}
|
|
</p>
|
|
</template>
|
|
<template #datetime>
|
|
<a-tooltip :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
|
|
<span>{{ item.datetime.fromNow() }}</span>
|
|
</a-tooltip>
|
|
</template>
|
|
</a-comment>
|
|
</a-list-item>
|
|
</template>
|
|
</a-list>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import dayjs from 'dayjs';
|
|
import relativeTime from 'dayjs/plugin/relativeTime';
|
|
dayjs.extend(relativeTime);
|
|
|
|
const data = [
|
|
{
|
|
actions: ['Reply to'],
|
|
author: 'Han Solo',
|
|
avatar: 'https://joeschmoe.io/api/v1/random',
|
|
content:
|
|
'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
|
|
datetime: dayjs().subtract(1, 'days'),
|
|
},
|
|
{
|
|
actions: ['Reply to'],
|
|
author: 'Han Solo',
|
|
avatar: 'https://joeschmoe.io/api/v1/random',
|
|
content:
|
|
'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
|
|
datetime: dayjs().subtract(2, 'days'),
|
|
},
|
|
];
|
|
</script>
|