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 ( {() => { return noticeTabListData.map((item: NoticeTabItem) => { const { key, name } = item; return ( {() => } ); }); }} ); } // tab标题渲染 function renderTab(key: string, name: string) { const list = getListData(key); const unreadlist = list.filter((item: NoticeListItem) => !item.read); return (
{name} {unreadlist.length > 0 && ({unreadlist.length})}
); } // 获取数据 function getListData(type: string) { return noticeListData.filter((item: NoticeListItem) => item.type === type); } return () => { const { visible } = props; return ( ); }; }, });