# Html 扩展富文本 渲染性能降级

一般用于富文本解析,例如新闻内容、文章内容、评论显示、推广信息等各类HTMl标签内容显示

温馨提示

n-rich-html 富文本解析组件,能够满足需要,则不建议使用此组件,如果有较多的富文本内容,则可以选择使用 vue 页面。

  • 支持丰富的标签(包括 table、video、svg 等)
  • 支持丰富的事件效果(自动预览图片、链接处理等)
  • 支持设置占位图(加载中、出错时、预览时)
  • 支持锚点跳转、长按复制等丰富功能
  • 支持大部分 html 实体
  • 丰富的插件(关键词搜索、内容 编辑 等)
  • 效率高、容错性强且轻量化

说明

此组件来源于uni-app插件市场优秀的开源作品mp-html 富文本组件 (opens new window),本文档只对重要的功能进行介绍,如果需要更详细的说明,请参考mp-html 官方文档 (opens new window)

# 基本使用

<template>
	<view>
		<n-html :content="content"></n-html>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: `<p>三更灯火五更鸡,正是男儿读书时。</p><img src="https://dnvue.dengqichang.cn/file/imgs/banner.png" />`
			}
		},
		methods: {

		}
	}
</script>

<style>

</style>

# API

# Attribute 参数

参数 说明 类型 可选值 默认值 平台差异说明
content 用于渲染的 html 字符串 String - -
copy-link 是否允许外部链接被点击时自动复制 Boolean false true
domain 主域名(用于链接拼接) String - -
error-img 图片出错时的占位图链接 String - -
lazy-load 是否开启图片懒加载 Boolean true false
loading-img 图片加载过程中的占位图链接 String - -
pause-video 是否在播放一个视频时自动暂停其他视频 Boolean false true
preview-img 是否允许图片被点击时自动预览 Boolean false true
scroll-table 是否给每个表格添加一个滚动层使其能单独横向滚动 Boolean true false
selectable 是否开启文本长按复制 Boolean true false
set-title 是否将 title 标签的内容设置到页面标题 Boolean false true
show-img-menu 是否允许图片被长按时显示菜单 Boolean false true
tag-style 设置标签的默认样式 Object - -
use-anchor 是否使用锚点链接 Boolean true false
bg-color 背景色,仅 NVUE 可用,不可设置为透明 String - white APP-NVUE
progress 开启加载进度条 Boolean true false APP-NVUE
progress-color 进度条颜色 String - 主题色 APP-NVUE

# Event 事件

事件名 说明
@load dom 树加载完毕时
@ready 图片加载完毕时
@error 发生渲染错误时
@imgtap 图片被点击时
@linktap 链接被点击时