Highlight

Used to safe highlighting keyword inside passed text.

Basic usage

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Source code

<script setup>
  import Input from '@/components/input/input.vue';
  import { vHighlight } from '@/directives/highlight.ts';
  import { ref } from 'vue';

  const keyword = ref('dolor');
  const text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.';
</script>

<template>
  <Input
    v-model="keyword"
    label="Keyword"
  />
  <div
    v-highlight="keyword"
    class="acv-text acv-text--body-24 mt-16"
  >
    {{ text }}
  </div>
</template>

TIP

Please pass pure text node into the slot without any tags.

Attributes

Attribute	Description	Type	Accepted Values	Default
keyword	String for search in inner text, can be empty	string	—	—