NoticeList.tsx
1.94 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import { defineComponent } from 'vue';
import { List, Avatar, Tag } from 'ant-design-vue';
import { NoticeListItem } from './data';
import './index.less';
const prefixCls = 'notice-popover';
export default defineComponent({
name: 'NoticeList',
props: {
list: {
type: Array,
default: () => [],
},
},
setup(props) {
// 头像渲染
function renderAvatar(avatar: string) {
return avatar ? <Avatar class="avatar" src={avatar} /> : <span>{avatar}</span>;
}
// 描述渲染
function renderDescription(description: string, datetime: string) {
return (
<div>
<div class="description">{description}</div>
<div class="datetime">{datetime}</div>
</div>
);
}
// 标题渲染
function renderTitle(title: string, extra?: string, color?: string) {
return (
<div class="title">
{title}
{extra && (
<div class="extra">
<Tag class="tag" color={color}>
{() => extra}
</Tag>
</div>
)}
</div>
);
}
return () => {
const { list } = props;
return (
<List dataSource={list} class={`${prefixCls}__list`}>
{() => {
return list.map((item: NoticeListItem) => {
const { id, avatar, title, description, datetime, extra, read, color } = item;
return (
<List.Item key={id} class={`${prefixCls}__list-item ${read ? 'read' : ''}`}>
{() => (
<List.Item.Meta
class="meta"
avatar={renderAvatar(avatar)}
title={renderTitle(title, extra, color)}
description={renderDescription(description, datetime)}
/>
)}
</List.Item>
);
});
}}
</List>
);
};
},
});