Highlight 文本高亮

Highlight 文本高亮 的基础用法、公开 API 与示例。

基础示例

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

<script setup lang="ts">
import { ref, } from "vue";
import { Highlight } from "@/components/page/highlight";

const demoProps = { keys: ["IDX", "组件"] };
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <Highlight v-bind="demoProps">IDX Web 组件文档</Highlight>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { Highlight } from "@/components/page/highlight";

Props

参数	说明	类型	默认值	必填
tag	高亮标签，默认 span	string	"span"	否
keys	高亮字段，默认 []	string[]	[]	否
color	高亮颜色，默认 cssVarEl(color-primary)	string	useNamespace().cssVarEl("color-primary")	否

Events

事件名	说明	回调参数
click	点击高亮字段	key: string

Slots

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

Expose

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

Module API

名称	说明	类型
Highlight	导出 Highlight 供业务侧复用。	useInstall(index)

Types

HighlightProps

导出 HighlightProps 供业务侧复用。

字段	说明	类型	默认值	必填
tag	高亮标签，默认 span	string	-	否
keys	高亮字段，默认 []	string[]	-	否
color	高亮颜色，默认 cssVarEl(color-primary)	string	-	否

HighlightEmits

导出 HighlightEmits 供业务侧复用。

字段	说明	类型	默认值	必填
click	点击高亮字段	[key: string]	-	是

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