作为一个有“只能用自己写的库类”的毛病的人,其实都是有着许多别人所不知道的血泪史的。
AutoComplete作为一个经常性的需求,然后还具备一大堆很复杂的交互,想想大概只能找一个成熟的开源库吧。
然后,找到了一个api貌似老长老长的开源库,不错哟,用起来。
然后,被产品无尽的需求折磨着,都是泪水。
然后,开始改源码,改着改着想骂人,触发的事件混杂的不认识它妈妈是谁,可是还是要硬着头皮改完。
其实很多东西,尽管api老长老长,实现的机制也可以很感人。
好吧,血泪史都已经说完了,开始要介绍我自己写的Autocomplete组件了,作为一个自强不息的人,是不会被产品的思维所打败的,对于自己的作品,拍着胸脯保证品质,绝对不坑。
HEYUI组件库

AutoComplete组件
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摄于乌兰巴托