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

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

來自專欄 HEYUI-前端UI庫

作為一個有「只能用自己寫的庫類」的毛病的人，其實都是有著許多別人所不知道的血淚史的。

AutoComplete作為一個經常性的需求，然後還具備一大堆很複雜的交互，想想大概只能找一個成熟的開源庫吧。

然後，找到了一個api貌似老長老長的開源庫，不錯喲，用起來。

然後，被產品無盡的需求折磨著，都是淚水。

然後，開始改源碼，改著改著想罵人，觸發的事件混雜的不認識它媽媽是誰，可是還是要硬著頭皮改完。

其實很多東西，儘管api老長老長，實現的機制也可以很感人。

好吧，血淚史都已經說完了，開始要介紹我自己寫的Autocomplete組件了，作為一個自強不息的人，是不會被產品的思維所打敗的，對於自己的作品，拍著胸脯保證品質，絕對不坑。

PS：專欄已經關注人數100啦，撒花

如果有興趣的，可以關注我們的專欄：HEYUI-前端UI庫

HEYUI組件庫

https://www.heyui.top/

AutoComplete組件

API文檔地址

Api大家可以通過上面的鏈接查看。

本篇文章主要是講述一些應用示例。

示例

百度搜索

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

調用代碼：

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

示例：admin.heyui.top/autocomplete1

源碼：源碼地址

配置：autocomplete配置地址

說明：使用config=baidu可以在其他模塊中快速調用該模糊匹配組件，具體可以查看API。

場景應用

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

調用代碼：

<AutoComplete config="simple" v-model="value"/>

示例：admin.heyui.top/autocomplete2

源碼：源碼地址

配置：autocomplete配置地址

說明：使用config=simple可以在其他模塊中快速調用該模糊匹配組件，具體可以查看API。

複雜場景

場景應用的示例主要是用來說明一些用於數據關聯的數據引用。

說明：先選擇了公司，再選擇該公司擁有的人員。

示例：admin.heyui.top/autocomplete3

源碼：源碼地址

配置：autocomplete配置地址

說明：使用config=company config=account可以在其他模塊中快速調用該模糊匹配組件，具體可以查看API。

關於HeyUI組件庫

後期，我們會出越來越多的heyui組件庫的一些說明教程給大家，希望大家多提提建議。

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

背景圖：2016攝於烏蘭巴托

推薦閱讀：