Highlight

introduce

Highlight specified text content.

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;
     }
   }
}

Props

Style variables

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