UseRender - 渲染

组件介绍

UseRender 是基于 Vue3 + TypeScript 自研的通用内容渲染组件，是 UseElInput 和 UseElForm 组件内部核心依赖组件，可灵活处理字符串、VNode、Vue 组件（同步 / 异步）等多种类型的内容渲染需求，通过精准的类型判断和差异化渲染逻辑，统一各类内容的渲染方式，降低多类型内容渲染的开发成本与维护复杂度。

核心亮点

多类型内容一站式渲染
精准的类型判断逻辑
类型安全与 TS 强约束
差异化渲染策略
轻量无冗余

解决痛点

多类型内容渲染「逻辑分散、代码冗余」

痛点：原生开发中，字符串、VNode、Vue 组件（同步 / 异步）的渲染需编写不同的模板逻辑和判断条件，代码冗余且易维护性差，新增 / 修改渲染类型需频繁改动模板。

解决方案：组件封装所有类型的渲染逻辑，外部仅需传入 content 参数即可完成渲染，无需编写分散的模板判断逻辑，新增 / 修改渲染类型仅需调整组件内部判断逻辑，外部模板无需改动。

Vue 组件识别「判断不准、渲染异常」

痛点：手动判断 Vue 组件（尤其是异步组件）时，易因判断条件不全面（如仅判断是否为对象）导致误判，将 VNode、普通对象等识别为组件，最终引发渲染异常。

解决方案：内置 isComponent 计算属性，先排除 VNode、字符串类型，再通过检测组件核心的 render/setup 函数存在性判断是否为 Vue 组件，精准识别同步 / 异步组件，避免因误判导致的渲染错误。

入参类型「无约束、运行时易出错」

痛点：原生开发中未对渲染内容做类型约束，可能传入数字、纯对象、数组等非法类型，导致页面渲染空白或报错，且问题需到运行时才能发现，排查成本高。

解决方案：基于 TypeScript 定义 contentType 类型，明确限定 content 入参仅支持 string | VNode | Component，开发阶段通过 TS 校验拦截非法类型传入，提前规避运行时异常。

HTML 字符串与组件渲染「逻辑冲突、适配性差」

痛点：富文本 HTML 字符串需用 v-html 渲染，组件需用<component>渲染，手动切换两种渲染方式时易出现逻辑漏洞，如字符串被错误识别为组件导致渲染失败。

解决方案：采用分层判断逻辑（先判断组件 / VNode 类型，再判断字符串类型，最后处理非法类型），组件 / VNode 走<component :is="content">原生渲染，字符串走 v-html 渲染，不同类型渲染逻辑互不干扰，兼容各类展示场景。

非法类型内容「无提示、排查困难」

痛点：传入不支持的内容类型时，原生开发通常仅显示空白，无法直观判断是内容为空还是类型错误，需逐行排查代码定位问题根源，效率低。

解决方案：对非法类型内容渲染红色错误提示文本，明确告知支持的内容类型（同步组件 / 异步组件 / VNode / 字符串），帮助开发者快速识别并修复内容类型错误。

使用

Types

import type { VNode, Component } from 'vue'

/**
 * 内容类型
 */
export type contentType = string | VNode | Component

/**
 * props接口
 */
export interface Props {
  /**
   * 渲染内容 必传
   */
  content: contentType
}

Props

defineProps<Props>()

UseRender - 渲染 ​

组件介绍 ​

核心亮点 ​

解决痛点 ​

使用 ​

Types ​

Props ​

UseRender - 渲染

组件介绍

核心亮点

解决痛点

使用

Types

Props