SafeHtml 安全 HTML

通过 DOMPurify 净化后展示 HTML；净化不替代后端访问控制。服务端渲染为空，挂载后更新内容。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref } from "vue";
import { SafeHtml } from "@/components/core/safe-html";

const demoProps = {
  source: "docs",
  content: `<strong>IDX Web</strong> 组件文档`,
};
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <SafeHtml v-bind="demoProps"></SafeHtml>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { SafeHtml } from "@/components/core/safe-html";

Props

参数	说明	类型	默认值	必填
content	待渲染的 HTML 字符串。	string	-	是
source	HTML 内容来源说明，用于审查直接渲染的业务来源。	string	-	是

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Types

SafeHtmlProps

SafeHtml 组件 Props。

字段	说明	类型	默认值	必填
content	待渲染的 HTML 字符串。	string	-	是
source	HTML 内容来源说明，用于审查直接渲染的业务来源。	string	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。