feat: add error handle

vben

2020-10-18 7101587b9676c91e9079044a096df08848f1f602

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>
      );
    };
  },
});