https://github.com/elonehoo/paragraph-highlight

vue paragraph highlight
https://github.com/elonehoo/paragraph-highlight

component vite vue

Last synced: 3 months ago
JSON representation

vue paragraph highlight

• Host: GitHub
• URL: https://github.com/elonehoo/paragraph-highlight
• Owner: elonehoo
• Created: 2022-04-11T08:13:10.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-16T02:53:45.000Z (10 months ago)
• Last Synced: 2024-04-17T06:53:33.722Z (10 months ago)
• Topics: component, vite, vue
• Language: TypeScript
• Homepage: http://paragraph.elonehoo.xyz
• Size: 147 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        






Paragraph Highlight








## Install

```bash

# npm 

npm i @elonehoo/paragraph-highlight

# yarn

yarn add @elonehoo/paragraph-highlight

# pnpm

pnpm i @elonehoo/paragraph-highlight

```

## Usage

To use it, just provide it with search words to props and a body of text to default slots.

```vue

import paragraphHighlight from '@elonehoo/paragraph-highlight/src'

  The word highlighter library for Vue 3.x

```

Output

![readme_1.png](./public/readme_1.png)

## Details

### Props

| Property | Type | Required? | Description |

|:---|:---|:---:|:---|

| query | String or RegExp | ✓ | Search words. Can be use string or regular expressions. |

| caseSensitive | Boolean |  | Search should be case sensitive. defaults to `false`. |

| splitBySpace | Boolean |  | Whether split the string with spaces to make it a search string. If false, the string is being searched as a whole word. defaults to `false`. When the query is set to a RegExp, the value of splitBySpace will be set to false.  |

| highlightTag | String |  | Type of tag to wrap around highlighted matches; defaults to `mark`. |

| highlightClass | String or Object or Array |  | Classes to be added to highlighted tag. Similar to class bindings in vue, it accepts Array syntax, Object syntax, or class as String.|

| highlightStyle | String or Object or Array | | Styles to be applied to highlighted tag. Similar to style bindings in vue, it accepts Array syntax, Object syntax, or plain styling as String. |

| wrapperTag | String |  | Type of tag to wrap around whole text; defaults to `span`. |

| wrapperClass | String or Object or Array |  | Classes to be added to wrap around the whole tag. Similar to class bindings in vue, it accepts Array syntax, Object syntax, or class as String. |

| textToHighlight | String |  | Text to highlight matches in. If this is not specified, the default slot value will be used for the search.  |

### Emits

| Property | Type |  Description |

|:---|:---:|:---|

| matches | Array | Returns matches words. This event fires when mounted and when the query and highlighted text are changed.|

By using matches emit, you can know from the parent component whether it is highlighted by VueWordHighlighter or not.

Example

```vue

import { ref } from "vue";

import paragraphHighlight from '@elonehoo/paragraph-highlight/src'

const matches = ref([]);

  


    Matched word count: {{ matches.length }}

  

   { matches = e }">

    The word highlighter library for Vue 3.x

  


```