HighlightInput
When To Use
When it is necessary to highlight the text in the input box, this component can highlight the incoming string array, and automatically highlight when the characters in the input box match it
Examples
标题
He3 is a free, modern developer toolbox. Check it out: https://he3.app
<template>
<h-highlight-input
v-model="testStr"
title="标题"
:highlight-text="matchArray"
:regex-modifier="rightRegex"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const testStr = ref(
'He3 is a free, modern developer toolbox. Check it out: https://he3.app'
);
const matchArray = ref<string[]>(['He3', 'https://he3.app']);
const rightRegex = ref('g');
</script>
API
Props
| Property | Description | Type | default |
|---|---|---|---|
| modelValue | bind text | string | |
| title | title | string | |
| highlightText | highlight text | Array<string> | |
| regexModifier | regular modifier | string |