Vue项目中实现ElementUi框架el-select拼音搜索功能

拼音搜索功能
- 注意事项

拼音搜索功能

前言：由于项目需要，且elementUI中的el-select只支持中文或英文匹配，不支持全拼音匹配或拼音首字母匹配，故封装该功能。

代码依赖

第三方包：pinyin-match

地址： https://github.com/xmflswood/pinyin-match
代码支持：
1. 全拼音匹配当输入beijing 可以匹配如下：“北京” “背景” “北京烤鸭”
2. 拼音首字母匹配当输入bj时可以匹配如下：“北京烤鸭” “布局” “编辑” “有背景”，即并不是从第一个汉字进行匹配，但需要首字母的汉字前后顺序符合。
3. 全拼音但最后一个汉字拼音非完整当输入beijin 可以匹配如下：“被禁” “北京”
4. 当输入拼音退格时，动态更新options的label（这个功能实现起来比较麻烦，大概多用了80%的代码）

代码实现

el-select添加属性

<el-select filterable:filter-method="(val)=>{$handleMatch(val,'deptList','name')}"@click.native="$resetOpts('deptList')"><el-optionv-for="item in deptList":key="item.dictId":label="item.name":value="item.dictId"></el-option>
</el-select>

创建拼音搜索相关方法

import store from '@/store'
import PinyinMatch from 'pinyin-match/es/traditional.js';// 方法在filter-method绑定的箭头函数中调用，需要三个参数：
// 1. el-options的value
// 2. option元素需要遍历的数组名
// 3. 要进行拼音匹配的options的属性
export function handleMatch(val, arrName, attr){let res = this.$pyMatch(val, this[arrName], attr)if(res.length !== 0){this[arrName] = res}
}// 该方法接收三个参数：
// 1. el-options的value
// 2. 需要遍历的options选项
// 3. 要进行拼音匹配的options的属性
// 备注：需要在页面销毁生命周期函数当中调用 this.$store.commit('resetTemp')export function pyMatch(val,options,attr){let res = []store.commit('copyOpts',options)store.commit('pushValArr',val)let sVal = store.state.tempSelect.valArr.slice(-2)[0]// 当options中的val的长度为1或小于上一次val的值时，重新将options的备份赋值给optionsif(val.length < sVal.length || val.length ===1) {options = store.state.tempSelect.tempOptsArr[0];}options.forEach(item => {let m = PinyinMatch.match(item[attr], val)if(m){res.push(item)}})// 如果没有匹配到结果，就重新将options的备份赋值给optionsif(res.length === 0) return optionsreturn res
}// 该方法接收一个参数：
// 1. option元素需要遍历的数组名
export function resetOpts(arrName){if(Array.isArray(this[arrName])){if(this[arrName].length <= 1){this[arrName] = this.$store.getters.getOriginalSelect}}
}

方法挂载到Vue实例

// 引入拼音搜索方法
import { handleMatch, pyMatch, resetOpts } from './utils/pinyinMatch'// 拼音搜索功能方法挂载到原型
Vue.prototype.$handleMatch = handleMatch
Vue.prototype.$pyMatch = pyMatch
Vue.prototype.$resetOpts = resetOpts

store中创建存储options备份的对象及操作方法

// options备份
state:{tempSelect:{tempOptsArr:[],valArr:[]}
},
mutations:{copyOpts(state,payload){  // 存储匹配到的options，原始的options存储在该数组的第0位if(Array.isArray(payload)){state.tempSelect.tempOptsArr.push(payload)}},pushValArr(state,val){  // 存储每次input变化时的valueif(typeof val === 'string'){state.tempSelect.valArr.push(val)}},resetTemp(state){ // 清空state中的tempSelect，每次路由跳转时调用state.tempSelect.tempOptsArr = []state.tempSelect.valArr = []}
},
getters:{getOriginalSelect(state){return state.tempSelect.tempOptsArr[0]}
}

在router全局导航守卫中调用清空options备份的方法

import store from '@/store'router.beforeEach((to, from, next) => {// 此处省略其他全局导航守卫中的内容if(store.state.tempSelect.tempOptsArr.length !== 0 ||        store.state.tempSelect.valArr.length !== 0){// 当临时存储options备份的数组不为空时，在页面跳转之前清空store.commit('resetTemp')}next()
})

注意事项

需要遍历的options 绑定的key不能绑定index 因为每一次搜索后 options数组会发生变化，如果绑定index，index则不能与options一一对应，应当绑定唯一的id或其他参数

Vue项目中实现ElementUi框架el-select拼音搜索功能相关推荐

vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
vue项目导入elementui_在vue项目中使用elementui
如何让你的前端程序看起来很优雅而又简单. 最近我做的项目几乎都是管理系统,所以为了节约时间,开始使用ui框架-----elementui. 一个简单的管理系统来说,这套ui框架足够使用了,而且对样式的 ...
在vue项目中使用Element-ui基本教程
element-ui是饿了么推出的一个开源ui库,它不依赖于vue.但是却是当前和vue配合做项目开发的一个比较好的ui框架. 官网:Element - The world's most popula ...
在vue项目中导入element-ui
在vue项目中添加插件导入并注册项目中需要的组件
在vue项目中引用element-ui时让el-input 获取焦点的方法
在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了element-ui 在网上查找了很多方法, 但是在实际使用中发现了一个问题无论是使用$ref获取 ...
在vue项目中同时使用element-ui和mint-ui,的时候，.babelrc配置文件怎么写
我们安装vue组件库的时候,考虑到大小问题,需要根据需要仅引入部分组件借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的. 但是在配置 .bab ...
vue项目中使用element-ui中的el-calendar日历制作考勤
最近做到一个项目,项目中涉及到人员考勤记录,做了好几版,总感觉页面太过于复杂,最后想到要用日历进行做一个简单又明了的个人考勤记录.文中使用了el-calenda方法,点击名字搜索特定的人,来调用后端接 ...
vue项目使用高德地图的定位及关键字搜索功能
1.首先在index.html引入高德地图的秘钥.如图: 注意:如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch,否则功能无法使用,并会 ...
vue项目中的elementui的表格中画甘特图
最近的项目要求甘特图在elementui中实现,在此做出总结. 性能限制,不能传入太多的数据. 条件(时间):计划开始时间.计划结束时间.开始时间.结束时间.最大时间和最小时间. 思维:渲染表格头.渲 ...
vue项目中更新element-ui版本
一.升级element-ui需要先卸载原先的版本,在cmd中输入 npm uninstall element-ui 二.然后重新安装element-ui npm i element-ui -S

Vue项目中实现ElementUi框架el-select拼音搜索功能

Vue项目中实现ElementUi框架el-select拼音搜索功能

拼音搜索功能

注意事项

Vue项目中实现ElementUi框架el-select拼音搜索功能相关推荐

最新文章

热门文章

Vue项目中 实现ElementUi框架el-select拼音搜索功能

Vue项目中 实现ElementUi框架el-select拼音搜索功能

拼音搜索功能

注意事项

Vue项目中 实现ElementUi框架el-select拼音搜索功能相关推荐

最新文章

热门文章

Vue项目中实现ElementUi框架el-select拼音搜索功能

Vue项目中实现ElementUi框架el-select拼音搜索功能

Vue项目中实现ElementUi框架el-select拼音搜索功能相关推荐