【vue-text-highlight】在vue2的使用教程

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、下载

npm install --save vue-text-highlight

二、使用步骤

1.引入库

代码如下（示例）：

import TextHighlight from 'vue-text-highlight';

在components中注册

2.用法

代码如下（示例）：

页面代码

<text-highlight :queries="queries">{{ item.name }}</text-highlight>

queries是一个数组，例如

['张三','李四']
// 我这里用computed来获取keyword搜索关键字
computed: {
  queries() {
    return [this.keyword];
  },
},

只要是标签内的这个item.name有满足queries的文字, 都会高亮显示

效果

默认黄色背景，文字加粗

插件文档地址

速通

其他属性