Autocomplete自動補全組件-HeyUI組件庫

做爲一個有「只能用本身寫的庫類」的毛病的人，其實都是有着許多別人所不知道的血淚史的。

AutoComplete做爲一個常常性的需求，而後還具有一大堆很複雜的交互，想一想大概只能找一個成熟的開源庫吧。
而後，找到了一個api貌似老長老長的開源庫，不錯喲，用起來。
而後，被產品無盡的需求折磨着，都是淚水。
而後，開始改源碼，改着改着想罵人，觸發的事件混雜的不認識它媽媽是誰，但是仍是要硬着頭皮改完。
其實不少東西，儘管api老長老長，實現的機制也能夠很感人。

好吧，血淚史都已經說完了，開始要介紹我本身寫的Autocomplete組件了，做爲一個自強不息的人，是不會被產品的思惟所戰勝的，對於本身的做品，拍着胸脯保證品質，絕對不坑。

HEYUI組件庫

www.heyui.top/

AutoComplete組件

API文檔地址

Api你們能夠經過上面的連接查看。
本篇文章主要是講述一些應用示例。

示例

百度搜索

百度搜索的示例主要是用來講明一些用於搜索的自動補全組件。

調用代碼：

<AutoComplete :mustMatch="false" config="baidu" v-model="keyword" type="title" @change="trigger"/>
複製代碼

示例：admin.heyui.top/autocomplet…
源碼：源碼地址
配置：autocomplete配置地址
說明：使用config='baidu'能夠在其餘模塊中快速調用該模糊匹配組件，具體能夠查看API。

場景應用

場景應用的示例主要是用來講明一些日常使用的自動補全功能。

調用代碼：

<AutoComplete config="simple" v-model="value"/>
複製代碼

示例：admin.heyui.top/autocomplet…
源碼：源碼地址
配置：autocomplete配置地址
說明：使用config='simple'能夠在其餘模塊中快速調用該模糊匹配組件，具體能夠查看API。

複雜場景

場景應用的示例主要是用來講明一些用於數據關聯的數據引用。
說明：先選擇了公司，再選擇該公司擁有的人員。

示例：admin.heyui.top/autocomplet…
源碼：源碼地址
配置：autocomplete配置地址
說明：使用config='company' config='account'能夠在其餘模塊中快速調用該模糊匹配組件，具體能夠查看API。

關於HeyUI組件庫

後期，咱們會出愈來愈多的heyui組件庫的一些說明教程給你們，但願你們多提提建議。

相關文章： 前端架構之路：數據驅動型組件-HeyUI，一個新型的VUE組件庫

背景圖：2016攝於烏蘭巴托