Autocomplete自动补全组件-HeyUI组件库

·  阅读 2093
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摄于乌兰巴托