Nutritious Polygonal Meatball

    vue-text-highlight

    2.0.10 • Public • Published

    Vue Text Highlight

    Coverage Status Build Status Downloads Downloads Version License

    See working example here.

    Installation

    npm install --save vue-text-highlight
    # or 
    yarn add vue-text-highlight

    Usage

    Basic Usage

    import Vue from 'vue';
    import TextHighlight from 'vue-text-highlight';
     
    Vue.component('text-highlight', TextHighlight);
     
    // new Vue ...

    SomeComponent.vue

    <template>
      <text-highlight :queries="queries">{{ description }}</text-highlight>
    </template>
    data() {
      return {
        queries: ['birds', 'scatt'],
        description: 'Tropical birds scattered as Drake veered the Jeep'
      };
    }

    Output

    text-highlight

    More Options

    All available props in TextHighlight component are:

    • queries: Array<String|RegExp>|String|RegExp

      This prop accepts string, regex, and array of strings or regex. If array is given, it will highlight the union of matched strings/regex globally.

    • [caseSensitive]: Boolean

      Whether string being searched is case sensitive.

    • [diacriticsSensitive]: Boolean

      Whether string being searched is diacritics sensitive.

    • [highlightStyle]: Object|Array|String

      Styles to be applied to highlighted <mark>. Similar to style bindings in vue, it accepts Array syntax, Object syntax, or plain styling as String. This prop will then be merged with default highlight styles in TextHighlight component. See style binding in Vue.js.

    • [highlightClass]: Object|Array|String

      Classes to be added to highlighted <mark>. Similar to class bindings in vue, it accepts Array syntax, Object syntax, or class as String. See class binding in Vue.js.

    • [highlightComponent]: Object|String

      By default vue-text-highlight uses <mark> for the highlighting. Pass this props to override with other tag (string) or custom component (Vue component definition).

      This component will be passed with two props from text-highlight:

      • index: Number

        Index of highlighted component.

      • text: String

        Highlighted words, equals to this.$slots.default[0].text

      For more details, see example below.

    • Other props and listeners that are not listed above are forwarded to the highlighted component. These props will be merged with higher precendence than index and text passed from text-highlight.

    Advanced Usage

    There might be a case where you want to do more things with the highlighted words. For that reason, vue-text-highlight supports custom component for the highlighted words. In this case, the following example alerts on click.

    OtherComponent.vue

    <template>
      <text-highlight
        :queries="queries"
        :highlightComponent="MyClickableComponent"
        :baz="foo"
        @customlistener="alert"
      >
        {{ description }}
      </text-highlight>
    </template>
    import MyClickableComponent from 'MyClickableComponent';
    data() {
      return {
        queries: ['birds', 'scatt'],
        description: 'Tropical birds scattered as Drake veered the Jeep'
        MyClickableComponent,
        foo: 'bar',
      };
    },
    methods: {
      alert() {},
    }

    MyClickableComponent.vue

    <template>
      <mark class="custom" @click="$emit('customlistener')">
        <slot></slot>
      </mark>
    </template>
    props: {
      baz: String, // From OtherComponent.vue
      index: Number, // From TextHighlight
      text: String, // From TextHighlight, equals to `this.$slots.default[0].text`
    }

    Changelog

    Changes are tracked in the changelog.

    License

    vue-text-highlight is available under the MIT License.

    Install

    npm i vue-text-highlight

    DownloadsWeekly Downloads

    24,271

    Version

    2.0.10

    License

    MIT

    Unpacked Size

    195 kB

    Total Files

    11

    Last publish

    Collaborators

    • albertlucianto