天天看點

vue.js + element中el-select實作拼音比對,分詞、縮寫、多音字比對能力

因為項目需要,需要在element原有可搜尋下拉框的基礎上添加設定拼音簡碼即可跳出的功能

在網上搜了很多也沒有發現跟element完美比對的,就自己寫了一種方法可以跟element完美比對,話不多說,直接上流程

1、既然要用到拼音搜尋,我們就需要一個拼音庫,在這裡我推薦一個第三方包:https://github.com/xmflswood/pinyin-match,在這裡首先對這個包的開發者表示萬分的感謝。

2.安裝第三方包:

npm install pinyin-match --save      

3.在index.html中引入

<script src="pinyin-match/dist/main.js"></script>

4.好了現在我們就能使用了,話不多說直接上代碼,為select添加filter-method方法,這是html部分的

vue.js + element中el-select實作拼音比對,分詞、縮寫、多音字比對能力

5.PinyinMatch()這個方法的具體内容

vue.js + element中el-select實作拼音比對,分詞、縮寫、多音字比對能力

val使我們輸入框的内容

copycommonAddr是我們對commonAddr的複制資料

這樣我們就實作了打出拼音簡碼選項即可跳出的功能,效果如下圖:

vue.js + element中el-select實作拼音比對,分詞、縮寫、多音字比對能力

很簡單吧,一點都不複雜的!!!!希望能幫到大家