Highlight

introduce

Highlight specified text content.

Code Demo

Basic usage

You can specify the keywords to be highlighted via keywords and the source text via source-string.

<z-highlight :keywords="keywords" :source-string="text" />
import { ref } from 'vue'
const text = ref('zebra-swiper is a mobile carousel component developed based on uniapp.')
const keywords = ref('zebra-swiper')

###Multiple character matching

If you need to specify multiple keywords, you can pass in keywords in the form of an array.

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

Set the highlight label class name

Through highlight-class you can set the class name of the highlight label to customize the style.

This method requires style penetration.

<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', 'mobile'])
const text = ref('zebra-swiper is a mobile carousel component developed based on uniapp.')
.demo-highlight {
   .text-content {
     font-size: 28rpx;
     line-height: 40rpx;
     color: var(--zebra-text-color);

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

API

Props

ParametersDescriptionTypeDefault value
auto-escapeWhether to automatically escapebooleantrue
case-sensitiveWhether to be case sensitivebooleanfalse
highlight-classThe class name of the highlighted elementstring-
keywordsText to be highlightedstring | string-
source-stringsource textstring-
unhighlight-classClass name of non-highlighted elementstring-

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

NameDefaultDescription
--z-highlight-tag-colorvar(--z-primary-color)Highlight text color