Vue-cli3 ，js根据汉字或拼音模糊搜索功能,汉字支持同音字、多音字，支持首字母

输入汉字模糊查询同音字，多音字，支持首字母，

目标用户为视障人士，需求是：
匹配字段：“行为” 。
可以使用 “兴魏”，“性未”，“xw”，“xingwei” ，“航为”，“杭微”，“hangwei”，“hw” 。 都可以搜索到目标词语
缺点：不支持跨字，前后鼻音混淆，不知道支持的搜索范围，不过可以手动添加

网上的大部分文章都是构建拼音的检索树，或者引入一其他数据文件。然后封装方法，导出。
缺点是，出错了不知道如何解决，或者哪儿少参数可能找到比较费劲。我要的就是拿来就能用的当然，有可能我只是想要首字母，却引入了４Ｍ的配置依赖，这确实是一个弊端

推荐一个→小茗同学的博客园的【干货】JS版汉字与拼音互转终极方案，附简单的JS拼音输入法　
非常优秀，写的很详细，但是当时着急，我觉得我太菜，可能会引入错误，少什么的，就没用。

解决方案

１、汉字转拼音
２、拼音匹配目标汉字

1、汉字转拼音

网上好多，但是我用起来不方便，那么大一串，吓唬谁呢

这里→npm依赖检索，我用的就是第一个 pinyin，网站里面有使用方法
引入使用的是 let pinyin = require("pinyin");
另外，这里的转化结果是数组，需要arr.join("")，转化下，等下我用，另外最好用trim()去除前后空格，

注：pinyin-pro 下面叫这个名字的，不好用，引入总报错。You may need an appropriate loader to handle this file type.
我输入的搜索内容转化：let str = pinyin(val.trim(),{style: pinyin.STYLE_NORMAL}).join("")

2、拼音匹配目标汉字

使用的是pinyin-match→https://www.npmjs.com/package/pinyin-match，里面也有说明
我使用的是import PinyinMatch from 'pinyin-match' 引入。

PinyinMatch.match(test, 'str')   
//test为目标汉字，str为用户输入汉字，上面转化的拼音
//搜索成功返回数组，数组第一个表示，搜索到的字段开始的位置，第二个表示搜索字段结束的位置
//搜索不到返回false

注：如果有什么生僻字，文章开始我推荐的小茗同学的【干货】JS版汉字与拼音互转终极方案，附简单的JS拼音输入法　，他的dome里面有不常用文字，然后进入vue\node_modules\pinyin\data\dict-zi-web.js ,把自己想加的加进去就好了，当然pinyin-match 同理

如果帮到你了，点个赞再走吧~