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
import { defineComponent } from 'vue';
import { Popover, Tabs } from 'ant-design-vue';
 
import NoticeList from './NoticeList';
import { NoticeTabItem, NoticeListItem, noticeTabListData, noticeListData } from './data';
import './index.less';
 
const prefixCls = 'notice-popover';
export default defineComponent({
  name: 'NoticePopover',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { attrs }) {
    // 渲染卡片内容
    function renderContent() {
      return (
        <Tabs class={`${prefixCls}__tabs`}>
          {() => {
            return noticeTabListData.map((item: NoticeTabItem) => {
              const { key, name } = item;
              return (
                <Tabs.TabPane key={key} tab={renderTab(key, name)}>
                  {() => <NoticeList list={getListData(key)} />}
                </Tabs.TabPane>
              );
            });
          }}
        </Tabs>
      );
    }
 
    // tab标题渲染
    function renderTab(key: string, name: string) {
      const list = getListData(key);
      const unreadlist = list.filter((item: NoticeListItem) => !item.read);
      return (
        <div>
          {name}
          {unreadlist.length > 0 && <span>（{unreadlist.length}）</span>}
        </div>
      );
    }
 
    // 获取数据
    function getListData(type: string) {
      return noticeListData.filter((item: NoticeListItem) => item.type === type);
    }
 
    return () => {
      const { visible } = props;
      return (
        <Popover
          title=""
          {...{
            ...attrs,
            visible,
          }}
          content={renderContent}
          class={prefixCls}
        />
      );
    };
  },
});