Highlight 高亮文本

介绍

高亮指定文本内容。

代码演示

基础用法

你可以通过 keywords 指定需要高亮的关键字,通过 source-string 指定源文本。

<z-highlight :keywords="keywords" :source-string="text" />
import { ref } from 'vue'
const text = ref('zebra-swiper是基于uniapp开发的一款移动端轮播组件。')
const keywords = ref('zebra-swiper')

多字符匹配

如果需要指定多个关键字,可以以数组的形式传入 keywords

<z-highlight :keywords="keywordsMore" :source-string="text" />
const keywordsMore = ref(['zebra-swiper', 'uniapp', '移动端'])

设置高亮标签类名

通过 highlight-class 可以设置高亮标签的类名,以便自定义样式。

此方法需要样式穿透。

<view class="text-content">
  <z-highlight
    :keywords="keywordsMore"
    :source-string="text"
    highlight-class="text-content-custom"
  />
</view>
<view class="text-content">
  <z-highlight
    :keywords="keywordsMore"
    :source-string="text"
    :highlight-style="{ color: 'var(--z-red)' }"
  />
</view>
const keywordsMore = ref(['zebra-swiper', 'uniapp', '移动端'])
const text = ref('zebra-swiper是基于uniapp开发的一款移动端轮播组件。')
.demo-highlight {
  .text-content {
    font-size: 28rpx;
    line-height: 40rpx;
    color: var(--zebra-text-color);

    ::v-deep &-custom {
      font-weight: bold;
    }
  }
}

API

Props

参数说明类型默认值
auto-escape是否自动转义booleantrue
case-sensitive是否区分大小写booleanfalse
highlight-class高亮元素的类名string-
keywords期望高亮的文本string | string-
source-string源文本string-
unhighlight-class非高亮元素的类名string-

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件

名称默认值描述
--z-highlight-tag-colorvar(--z-primary-color)高亮文本颜色