项目场景:
我领导说他大BOSS想要可以拼音搜索,然后我就去百度百度百度…
只是elementUI级联选择器的拼音模糊搜索,可以作为普通输入框模糊搜索的借鉴…
实现步骤:
1、下载依赖:
可以在VScode打开项目的终端里执行这行语句,或者在项目文件夹的cmd里…
这依赖好像是某个大佬写的,大佬niubility!
npm install pinyin-match --save
2、使用方法(大致结构):
方法是 挂载到全局 还是作为 私有方法 看你自身了.
配合filter-method自定义搜索逻辑使用.
<template>//方法直接挂上去就可以了,参数他自动获取的,不用输入<el-cascaderfilterable:filter-method="PinYinScreen"></el-cascader>
</template><script>import PinYinMatch from 'pinyin-match'; //下载了依赖,直接复制这行就可以data() {return {}},methods: {PinYinScreen(node, keyword) {//node: 节点node(有多少个选项就有多少个node)//keyword: 输入的搜索关键字//类似for循环,此方法会执行多次//返回布尔值表示是否命中//此判断为初始判断,就是正常的输入搜索逻辑if(!!~node.text.indexOf(keyword) || !!~node.text.toUpperCase().indexOf(keyword.toUpperCase())) {return true}//此判断作为拼音模糊搜索判断//匹配失败时,PinYinMatch.match()返回的是false,//匹配成功时,PinYinMatch.match()返回的是数组,//例如:match("曾经沧海", "canghai"),返回[2,3],也就是字符串出现的区间if(PinYinMatch.match(node.label, keyword)) {return true}},}
</script>