DataNotice 公告通知

使用 avue-data-notice 展示公告通知，通过 option 提供配置和数据。

使用示例

效果预览可直接操作下方示例

点击公告或“更多”，下方显示对应回调；真实跳转由业务接入。

正在加载示例…

<template>
  <avue-data-notice :option="option" @more="handleMore" @click="item => status = '当前公告：' + item.title"></avue-data-notice>
  <el-alert :title="status || '点击公告或更多查看回调'" :closable="false" />
</template>
<script setup>
import { ref } from 'vue';
const status = ref('');
const option = ref({
  title: '系统公告',
  data: [
    { title: '关于2024年春节放假的通知', date: '2024-02-01', tag: '重要', tagColor: '#f56c6c' },
    { title: '系统将于本周六进行升级维护', date: '2024-01-28', tag: '通知', tagColor: '#409eff' },
    { title: '新功能上线：数据导出功能', date: '2024-01-25', tag: '更新', tagColor: '#67c23a' },
    { title: '安全提醒：请定期修改密码', date: '2024-01-20', tag: '安全', tagColor: '#e6a23c' }
  ]
});
const handleMore = () => {
  status.value = '已触发 more，可在此切换到业务公告列表';
};
</script>

Props

参数	类型	默认值	说明
option	object	{}	组件配置；不使用 option 外的独立 data 属性

option 配置

字段	类型	默认值	说明
data	array	[]	公告数据
title	string	—	列表标题，不设置时整个头部隐藏
showMore	boolean	true	是否展示更多入口，需要同时设置 title
moreText	string	更多（语言包）	更多入口文字

data 数据项

字段	类型	默认值	说明
title / date	string	—	公告标题和日期文本
tag / tagColor	string	— / #409eff	标签文字与背景色
click	function	—	单项点击回调 click(item)

事件与回调

事件	触发时机	载荷
click	点击公告，随后再调用 item.click	item
more	点击头部更多入口	无参数

插槽与方法

当前组件未定义内容插槽。

不需要通过 ref 调用内部渲染方法；更新 option 或 option.data 即可刷新内容。