Html 富文本渲染

全端 HTML 解析渲染组件，用于展示后端返回的富文本内容、商品详情长图文本、文章公告等，支持大图 100% 自适应缩放、大图点击全屏预览与超链接代理。

---

代码示例

1. 基础用法 (Basic Usage)

<template>
  <mu-html :content="htmlString" @img-tap="onImgTap" @link-tap="onLinkTap" />
</template>

<script setup>
import { ref } from 'vue'

const htmlString = ref('<h3>标题</h3><p>富文本段落内容...</p>')

function onImgTap({ src }) {
  console.log('点击的图片地址:', src)
}

function onLinkTap({ href }) {
  console.log('点击的超链接地址:', href)
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
content	待解析渲染的 HTML 富文本字符串	String	-	''
previewImage	点击富文本内的图片是否开启全屏大图预览	Boolean	true | false	true
selectable	文本是否支持长按选中复制	Boolean	true | false	true
fontSize	富文本默认字号 (rpx)	Number | String	-	28
lineHeight	文本默认行高	Number | String	-	1.8
color	自定义默认文字颜色	String	-	'' (自适应暗黑模式)
space	连续空格保留模式	String	nbsp | ensp | emsp	'nbsp'

---

事件说明 (Events)

事件名	说明	回调参数
img-tap	点击富文本中的 <img> 标签图片时触发	(res: { src: string })
link-tap	点击富文本中的 <a> 标签超链接时触发	(res: { href: string })
click	点击整个富文本容器区域时触发	(event: MouseEvent)