![7baff3bb309fa8712710e715ae63bf18.png](https://img-blog.csdnimg.cn/img_convert/7baff3bb309fa8712710e715ae63bf18.png)
5分钟实现一个Tag-Input(标签)组件
前言
本文是wo写组件设计的第一篇文章(处女作
),之所以会写组件设计相关的文章,是因为作为一名优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去辛(dao
)勤(gen
)劳(huo
)动(zhong
),而是要根据已有前端的开发经验,总结出一套自己的高效开发的方法。作为数据驱动的领导者vue
等MVVM框架的出现,帮我们减少了工作中大量的冗余代码,一切皆组件的思想深得人心。所以,为了让工程师们有更多的时间去考虑业务和产品迭代,我们不得不掌握高质量组件设计的思路和方法。所以笔者将花时间去总结各种业务场景下的组件的设计思路和方法,并用原生框架的语法去实现各种常用组件的开发,希望等让前端新手或者有一定工作经验的朋友能有所收获。
正文
在开始组件设计之前希望大家对css3
和js
有一定的基础。我们先看看实现后的组件效果:TagInput
是一种可编辑的输入框,通过回车或者空格分割每个标签,用 vue
来实现还是比较简单的。
先看效果图,下面会一步一步实现他。由视频演示可以知道
tag-input
组件可以自定义颜色主题(color theme
), 可以手动关闭标签。
组件设计思路
我们第一步是要确认需求,一个tag标签组件一般都会有如下需求点:
- 可以改变标签颜色
- 提供关闭标签的配置,让用户可以关闭标签
需求收集好之后,作为一个有追求的程序员,会得出如下线框图:
![4ea342c13f4c4ac5a700bbdc5a2c774c.png](https://img-blog.csdnimg.cn/img_convert/4ea342c13f4c4ac5a700bbdc5a2c774c.png)
vue有自带的属性检测方式,这里就不介绍了.
开工
注:以下代码需要vue-cli环境才能执行
”
新建文件夹及相关文件
在src/components/
目录中创建Tag-Input
目录,并且创建Tag-Input.vue
文件和index.js
文件。如下图: