高亮文本 Highlight

用过搜索引擎的都知道我是做什么的

何时使用

• 需要对搜索结果中指定文本高亮时

基本使用

Vue Amazing UI 是一个 Vue3 的组件库，主题可调，全量使用 TypeScript 和 SFC，支持 tree shaking，有点意思

Show Code

<script setup lang="ts">
import { ref } from 'vue'
const text = ref(
  'Vue Amazing UI 是一个 Vue3 的组件库，主题可调，全量使用 TypeScript 和 SFC，支持 tree shaking，有点意思'
)
const patterns = ref(['Vue Amazing UI', 'Vue3', 'TypeScript', 'SFC', 'tree shaking'])
</script>
<template>
  <Highlight :text="text" :patterns="patterns" />
</template>

样式

Vue Amazing UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接

Show Code

<template>
  <Highlight
    text="Vue Amazing UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接"
    :patterns="['Vue Amazing UI', 'TypeScript']"
    :highlight-style="{
      padding: '0 6px',
      borderRadius: '4px',
      display: 'inline-block',
      color: 'rgb(255, 255, 255)',
      background: 'rgb(24, 160, 88)',
      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
    }"
  />
</template>

区分大小写

Vue Amazing UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接

Show Code

<template>
  <Highlight
    text="Vue Amazing UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接"
    :patterns="['Vue Amazing UI', 'typeScript']"
    case-sensitive
  />
</template>

高亮标签

Vue Amazing UI 是一个 Vue3 的组件库，主题可调，全量使用 TypeScript 和 SFC，支持 tree shaking，有点意思

Show Code

<script setup lang="ts">
import { ref } from 'vue'
const text = ref(
  'Vue Amazing UI 是一个 Vue3 的组件库，主题可调，全量使用 TypeScript 和 SFC，支持 tree shaking，有点意思'
)
const patterns = ref(['Vue Amazing UI', 'Vue3', 'TypeScript', 'SFC', 'tree shaking'])
</script>
<template>
  <Highlight
    :text="text"
    :patterns="patterns"
    highlight-tag="span"
    :highlight-style="{ fontWeight: '500', color: '#ff6900', textDecoration: 'underline' }"
  />
</template>

APIs

Highlight

参数	说明	类型	默认值
text	文本	string	undefined
patterns	需要高亮的文本内容	string[]	[]
autoEscape	自动转义。默认情况下，patterns 中的元素会被转化为正则表达式进行匹配，这个过程中需要进行自动转义，正则表达式最终匹配的是元素的字面内容，例如 \( 匹配的就是 \(。如果你需要 Highlight 组件去匹配使用 patterns 中元素本身构造的正则表达式，例如 \( 匹配的是 (，则可以设为 false。如果你看不懂这些，不要改这个设置。	boolean	true
caseSensitive	区分大小写	boolean	false
highlightTag	高亮内容的 HTML 元素类型	string	'mark'
highlightClass	高亮内容的类名	string	undefined
highlightStyle	高亮内容的样式	CSSProperties	{}