A Vue plugin for searching the content of an element and highlighting the keyword with the mark element.
The plugin includes a vue directive. It searches the children of the element recursively and replaces the keyword with a mark element.
$ npm i -S v-search-and-highlight未压缩版本
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/v-search-and-highlight.js"></script>压缩版本
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/v-search-and-highlight.min.js"></script>The directive requires the keyword argument and surpports an optional filter function to filter out elements.
| Name | Required | Type | Description |
|---|---|---|---|
| keyword | true | String | The keyword to search |
| filter | false | Function/String | If it is a function, it's the function to filter the elements, take the DOM node as parameter and return true for handling the element; If it is a string, it's the class name of for elements to filter out. |
There are examples in the examples folder, and you can view them here.
For data binding, we have to use v-text directive other than the mustache syntax.
Because the mustache syntax generates a text node, but this directive replaces text with a html node, which cann't be in a text node.