Article 文章

avue-article 展示标题、摘要、正文与阅读信息，支持正文图片预览和自定义内容区域。

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

示例用字段映射展示一篇组件使用说明，点击正文图片可预览；下方显示图片或链接事件。

正在加载示例…

<template>
  <avue-article :data="article" :props="{ body: 'content' }" :title-level="2" show-info
                @image-click="eventText = '点击图片：' + $event.src"
                @link-click="eventText = '点击链接：' + $event.href">
    <template #footer="{ data }">
      <el-tag type="info">{{ data.category }}</el-tag>
    </template>
  </avue-article>
  <el-alert :title="eventText || '点击正文图片可预览，点击链接可查看事件'" type="info" :closable="false" />
</template>

<script setup>
import { ref } from 'vue'
const eventText = ref('')
const article = {
  title: '用结构化数据展示文章',
  meta: 'Avue 文档示例 · 组件使用说明',
  lead: '标题、摘要与正文分别传入；接口字段不一致时可用 props 映射。',
  category: '组件指南',
  content: `<p>将正文放入 <code>content</code> 字段，再通过 <code>props.body</code> 指定映射。</p>
    <h3>图片与链接</h3>
    <p>下面的图片来自本站，点击后可放大查看。</p>
    <p><img src="/images/logo.png" alt="Avue Logo" width="160"></p>
    <p><a href="/docs/installation.html">查看安装说明</a></p>`
}
</script>

Props

参数	说明	类型	默认值
data	文章数据	object	{}
props	字段映射，优先于 option.props	object	{}
option	兼容配置对象，当前使用其中的 props	object	{}
sanitize	true 使用内置 HTML 过滤，函数自定义正文处理，false 原样展示	boolean / function	true
preview	点击正文图片后打开图片预览	boolean	true
showInfo	显示字数和预计阅读时长	boolean	false
titleLevel	标题层级，最终限制在 1 至 6	number	1
maxWidth	最大宽度，数字追加 px，字符串直接使用	number / string	''

默认文章字段为 title（标题）、meta（作者/时间等说明）、lead（摘要）、body（HTML 正文）。如接口返回 content，可传 :props="{ body: 'content' }"。字数为去除 HTML 标签和空白后的字符数，预计阅读时长按每分钟 400 字向上取整、至少 1 分钟。

sanitize 函数 (html) => html 会替代内置过滤，仅对可信且已处理的内容关闭过滤。默认过滤在浏览器 DOM 中执行；服务端渲染场景应保持一致的内容处理策略或使用客户端渲染边界。

Events

事件	参数	说明
image-click	{ data, src, event }	点击正文图片，无论是否开启预览都会触发
link-click	{ data, href, event }	点击正文链接；需要阻止跳转时调用 event.preventDefault()
preview-open	{ data, src, index, images }	图片预览打开
preview-close	{ data }	图片预览关闭

Slots 与 Methods

插槽	参数	说明
header	{ data }	替换标题和元信息
lead	{ data }	替换摘要
body	{ data, content }	替换正文，content 为处理后的 HTML
empty	{ data }	无正文且无 body 插槽时显示
footer	{ data }	文章末尾内容

通过 ref.closePreview() 可关闭图片预览。文章内容直接更新 data，不需要调用内部格式化方法。