BizHighlight 关键词高亮

搜索结果 / 日志 / 表格中把命中关键词标红加亮：支持多关键词、大小写模式（忽略 / 敏感 / 全词精确）与三种高亮样式。文本切片渲染（非 v-html 拼接），天然免疫 XSS；继承宿主字体字号，放进任何文本场景即可用。

基础用法

• 该账户存在异常登录风险，已触发二次验证
• 风险控制规则每日凌晨自动更新
• 今日无新增风险告警
• 常规巡检完成，未发现风险点

关键词与搜索输入联动，命中片段主题色加粗。

<script setup lang="ts">
/** 基础用法：搜索列表关键词联动标红 */
import { ref } from 'vue'
import { BizHighlight } from 'vue3-ep-biz-lib'

const keyword = ref('风险')

const rows = [
  '该账户存在异常登录风险，已触发二次验证',
  '风险控制规则每日凌晨自动更新',
  '今日无新增风险告警',
  '常规巡检完成，未发现风险点',
]
</script>

<template>
  <div>
    <ElInput v-model="keyword" placeholder="输入关键词" style="max-width: 240px; margin-bottom: 12px" clearable />
    <ul class="list">
      <li v-for="(row, i) in rows" :key="i">
        <BizHighlight :text="row" :keyword="keyword" />
      </li>
    </ul>
  </div>
</template>

<style scoped>
.list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list li {
  padding: 8px 12px;
  font-size: 14px;
  border-bottom: 1px dashed var(--el-border-color-lighter);
}
</style>

显示代码

多关键词 · 样式 · 匹配模式

风险账户 Risk Control 已被风控中心标记为 RISK 级别

风险账户 Risk Control 已被风控中心标记为 RISK 级别

risk RISK Risk 三个词大小写不同

订单 ORD100 与 ORD1001 是两笔订单

keyword 数组多词全亮；type 三种样式（primary / bg / danger）；match-mode 精确模式用 \b 词边界（ORD100 不误亮 ORD1001）。

<script setup lang="ts">
/** 进阶：多关键词 + 三种样式 + 精确匹配模式 */
import { BizHighlight } from 'vue3-ep-biz-lib'
</script>

<template>
  <div class="box">
    <p><BizHighlight text="风险账户 Risk Control 已被风控中心标记为 RISK 级别" :keyword="['风险', '风控']" /></p>
    <p><BizHighlight text="风险账户 Risk Control 已被风控中心标记为 RISK 级别" keyword="risk" type="bg" /></p>
    <p><BizHighlight text="risk RISK Risk 三个词大小写不同" keyword="risk" match-mode="case" type="danger" /></p>
    <p><BizHighlight text="订单 ORD100 与 ORD1001 是两笔订单" keyword="ORD100" match-mode="exact" /></p>
  </div>
</template>

<style scoped>
.box p {
  margin: 0 0 10px;
  font-size: 14px;
}
</style>

显示代码

表格内高亮

el-table 单元格里与搜索条件联动，命中列标红（列表检索最常见用法）。

<script setup lang="ts">
/** el-table 内嵌高亮：搜索关键词命中列标红 */
import { computed, ref } from 'vue'
import { BizHighlight } from 'vue3-ep-biz-lib'

const keyword = ref('')
const rows = [
  { id: 1, name: '支付风控规则-夜间大额', owner: '风控组', status: '运行中' },
  { id: 2, name: '营销活动-新人风险礼包', owner: '营销组', status: '已暂停' },
  { id: 3, name: '账户风险等级模型', owner: '算法组', status: '运行中' },
  { id: 4, name: '反欺诈实时引擎', owner: '风控组', status: '灰度中' },
]
const filtered = computed(() =>
  keyword.value === '' ? rows : rows.filter((r) => `${r.name}${r.owner}`.includes(keyword.value))
)
</script>

<template>
  <div>
    <ElInput v-model="keyword" placeholder="搜索规则名 / 负责组" clearable style="max-width: 240px; margin-bottom: 12px" />
    <ElTable :data="filtered" size="small" border>
      <ElTableColumn prop="id" label="ID" width="60" />
      <ElTableColumn label="规则名称">
        <template #default="{ row }">
          <BizHighlight :text="row.name" :keyword="keyword" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="负责组" width="120">
        <template #default="{ row }">
          <BizHighlight :text="row.owner" :keyword="keyword" />
        </template>
      </ElTableColumn>
      <ElTableColumn prop="status" label="状态" width="100" />
    </ElTable>
  </div>
</template>

显示代码

日志告警关键词

2026-09-29 10:21:33 [ERROR] upstream timeout after 3000ms (gateway)

2026-09-29 10:21:35 [INFO ] retrying upstream#2

2026-09-29 10:21:36 [FATAL] all upstreams failed, circuit open

2026-09-29 10:22:01 [INFO ] recovered, avg latency 86ms

多关键词 + danger 样式：ERROR / FATAL / timeout 统一红色标记。

<script setup lang="ts">
/** 日志告警高亮：多关键词 + danger 样式（error/fatal 红色标记） */
import { ref } from 'vue'
import { BizHighlight } from 'vue3-ep-biz-lib'

const keyword = ['ERROR', 'timeout', 'FATAL']

const logs = ref([
  '2026-09-29 10:21:33 [ERROR] upstream timeout after 3000ms (gateway)',
  '2026-09-29 10:21:35 [INFO ] retrying upstream#2',
  '2026-09-29 10:21:36 [FATAL] all upstreams failed, circuit open',
  '2026-09-29 10:22:01 [INFO ] recovered, avg latency 86ms',
])
</script>

<template>
  <div class="console">
    <div v-for="(log, i) in logs" :key="i" class="line">
      <BizHighlight :text="log" :keyword="keyword" type="danger" />
    </div>
  </div>
</template>

<style scoped>
.console {
  padding: 12px;
  border-radius: var(--el-border-radius-base);
  background: var(--el-fill-color-darker);
  font-family: monospace;
  font-size: 12.5px;
}
.line {
  padding: 3px 0;
  line-height: 1.6;
}
</style>

显示代码

已选条件联动

当前筛选：状态待风控审核渠道App 内申请关键词夜间大额

当前筛选命中列表（关键词列高亮，删条件即去高亮词）：

• 「夜间大额」预警规则命中 3 笔
• 「日间大额」预警规则命中 1 笔

与 BizFilterTags 组合：删除条件即去掉对应高亮词。

<script setup lang="ts">
/** 与 BizFilterTags 组合：已选条件回显 + 值高亮联动 */
import { ref } from 'vue'
import { BizFilterTags, BizHighlight } from 'vue3-ep-biz-lib'
import type { BizFilterTagItem } from 'vue3-ep-biz-lib'

const items = ref<BizFilterTagItem[]>([
  { key: 'status', label: '状态', text: '待风控审核' },
  { key: 'channel', label: '渠道', text: 'App 内申请' },
  { key: 'keyword', label: '关键词', text: '夜间大额' },
])
</script>

<template>
  <div>
    <BizFilterTags
      :items="items"
      @remove="(item: BizFilterTagItem) => (items = items.filter((x) => x.key !== item.key))"
      @clear="items = []"
    />
    <div class="result">
      当前筛选命中列表（关键词列高亮，删条件即去高亮词）：
      <ul>
        <li v-for="(row, i) in ['「夜间大额」预警规则命中 3 笔', '「日间大额」预警规则命中 1 笔']" :key="i">
          <BizHighlight :text="row" :keyword="items.filter((c) => c.key === 'keyword').map((c) => c.text)" type="bg" />
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.result {
  margin-top: 10px;
  font-size: 13px;
}
.result ul {
  margin: 6px 0 0;
  padding-left: 18px;
  line-height: 2;
}
</style>

显示代码

精确 vs 模糊对比

模糊：订单 ORD100 与 ORD1001、ORD1002 已合并出库

精确：订单 ORD100 与 ORD1001、ORD1002 已合并出库

同屏对比：模糊模式 ORD1001/ORD1002 被连带命中，exact（\b 词边界）只亮 ORD100——单号类关键词建议用 exact。

订单号 ORD100 不误亮 ORD1001——单号类关键词用 exact 词边界。

<script setup lang="ts">
/** 精确 vs 模糊对比：订单号 ORD100 不误亮 ORD1001 */
import { BizHighlight } from 'vue3-ep-biz-lib'
</script>

<template>
  <div class="box">
    <p>
      模糊：<BizHighlight text="订单 ORD100 与 ORD1001、ORD1002 已合并出库" keyword="ORD100" />
    </p>
    <p>
      精确：<BizHighlight text="订单 ORD100 与 ORD1001、ORD1002 已合并出库" keyword="ORD100" match-mode="exact" />
    </p>
    <p class="tip">同屏对比：模糊模式 ORD1001/ORD1002 被连带命中，exact（\b 词边界）只亮 ORD100——单号类关键词建议用 exact。</p>
  </div>
</template>

<style scoped>
.box p {
  margin: 0 0 10px;
  font-size: 14px;
}
.tip {
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

Props

属性名	类型	默认值	说明
text	string	''	原文
keyword	string | string[]	''	关键词（数组多词全亮）
match-mode	'insensitive' | 'exact' | 'case'	'insensitive'	忽略大小写 / 全词精确（词边界）/ 大小写敏感
type	'primary' | 'bg' | 'danger'	'primary'	高亮样式：主题色文字 / 黄底块 / 警示红

Events

事件名	参数	说明
—	—	无

Slots

插槽名	说明
—	无插槽

Expose

属性/方法	说明
—	无