Highlight

Used to safe highlighting keyword inside passed text.

Figma mockups

https://www.figma.com/file/AOtI028uCFzAmnADVCz872/Documentation?node-id=2%3A26

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 { ref } from 'vue';
  import { vHighlight } from '@/directives/highlight.ts';
  import Input from '@/components/input/input.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	—	—