视觉asp网站源码,那个网站可以找人做兼职,加强教育信息网站建设,linux 装wordpress5分钟实现一个Tag-Input(标签)组件前言本文是wo写组件设计的第一篇文章(处女作)#xff0c;之所以会写组件设计相关的文章,是因为作为一名优秀的前端工程师#xff0c;面对各种繁琐而重复的工作#xff0c;我们不应该按部就班的去辛(dao)勤(gen)劳(huo)动(zhong)#xff0c… 5分钟实现一个Tag-Input(标签)组件前言本文是wo写组件设计的第一篇文章(处女作)之所以会写组件设计相关的文章,是因为作为一名优秀的前端工程师面对各种繁琐而重复的工作我们不应该按部就班的去辛(dao)勤(gen)劳(huo)动(zhong)而是要根据已有前端的开发经验总结出一套自己的高效开发的方法。作为数据驱动的领导者vue等MVVM框架的出现,帮我们减少了工作中大量的冗余代码一切皆组件的思想深得人心。所以为了让工程师们有更多的时间去考虑业务和产品迭代我们不得不掌握高质量组件设计的思路和方法。所以笔者将花时间去总结各种业务场景下的组件的设计思路和方法并用原生框架的语法去实现各种常用组件的开发希望等让前端新手或者有一定工作经验的朋友能有所收获。正文在开始组件设计之前希望大家对css3和js有一定的基础。我们先看看实现后的组件效果:TagInput是一种可编辑的输入框通过回车或者空格分割每个标签用 vue来实现还是比较简单的。先看效果图下面会一步一步实现他。由视频演示可以知道tag-input组件可以自定义颜色主题(color theme), 可以手动关闭标签。组件设计思路我们第一步是要确认需求一个tag标签组件一般都会有如下需求点可以改变标签颜色提供关闭标签的配置让用户可以关闭标签需求收集好之后作为一个有追求的程序员会得出如下线框图:vue有自带的属性检测方式,这里就不介绍了.开工注以下代码需要vue-cli环境才能执行”新建文件夹及相关文件在src/components/目录中创建Tag-Input目录并且创建Tag-Input.vue文件和index.js文件。如下图布局搭建基本结构templatediv classtag-input div classtag-item v-foritem in tags :keyitem{{ item }}div input classtag-input keyup.spacegenerateTag v-modelvalue typetextdivtemplate书写基本逻辑在组件内部维护一个tags数组默认为空数组在组件内部维护一个value字符串默认为空字符串书写一个方法generateTag绑定给input的keyup事件并且给定修饰符为space/enter当输入为合法字符串后将当前的value值push到tags中 通过v-for循环出来。代码如下export default { name: Tag-Input, data () { return { tags: [], value: } }, methods: { generateTag () { // 判定value是否合法 不能唯空 if (this.value.trim().length 0) { this.tags.push(this.value) } // 还原input的输入状态 this.value } }}外观我们让循环出来的tag和input出于同一行内并且去掉input的border/out-line/和background让最外层的div.tag-input被模拟成一个input的感觉。个人觉得element-ui的tag组件蛮漂亮的所以借鉴。毕竟读书人不能叫窃取而是叫借鉴。传送门.tag-input-warp{ width: 80%; height: 150px; border-radius: 5px; border: 1px solid #666; margin: auto; padding: 24px; } .tag-item, .tag-input{ display: inline-block; } .tag-item{ padding: 10px 14px; font-size: 14px; background-color: #f2f9ec; color: #84c259; border: 1px solid #e4fada; text-align: center; margin: 6px; /*vertical-align: middle;*/ } .tag-input{ border: none; outline: none; } .tag-text{ vertical-align: middle; } .tag-icon__close{ cursor: pointer; vertical-align: middle; display: inline-block; width: 16px; height: 16px; background-size: contain; background-repeat: no-repeat; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgEAYAAAAj6qa3AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAAUO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAjdJREFUaN7t1t9LU2EcBvDndRtKR6YX4UQCJevCi26k6CI0vYluBAeObZgEUdFNSjfhRNtGh04qBHUKN6iLfkjtUFANTE7E8OxClzLIbqSZrMARNEr6gTr1vF2tiyLQ9e5sg/fzB7x8n4fzft8DcBzHcRzHcWwEA3OzZ89YLKzP9dJYY/d5q/Wq9FJ1dFVVsTq3jN2AEXqSVld/vrE68P3T/Pzl5mizO9jZySq4UPGps9MTm7uqrCb5WCw6Arwk3Zyl6ysYJYeAhSFpOgJDCmKCr6zXXJbt/peaP31AM9NYJgebCsHUhHCbPqBVf6pMvZs/9NrflZz5434Uxtwd/j9Yq12zV2TyWy3iGxw8b624VqamhKva8fd5JJiUaokzY0FDpX3oooVHBidBFoxG7EPB6Mk9P0nNNZvrx6xBJQ1XVSEdYmZjAF3SQY/X1pt6tF3qirc1D2kmIJJMlX8A/i9iD/fRdIoEe3CIHBcGo4FnMluB2lT9ZC5tjIyPwkCVYUym8xRsSbWoqG6c34ZAko4IbXkD2jv/1EEXAQCn8JTKsqx/JM9xR5ZzfTWKtoC/gv9xxwfHWuceqX19eI80DksSuultEgiFjC4ib8F3utVzfT6LRvbPTfRpR13R6elcn7OSK4JVcKOLYLYDzBfXxnTRZoOAxySl61hAmu5tafnfrT4otF55GPZ68ZosIj48jFEaJ2mfT1EUxeEwmVjNXzK8NEIdXZWVhZ6D4ziO47jS9wur727lgG2ewAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wNS0yOFQyMjowMzoyNiswODowMBt9NI0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDUtMjhUMjI6MDM6MjYrMDg6MDBqIIwxAAAASHRFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl92dXY4bmVpeTFjL2NoYWhhby5zdmc0h1nOAAAAAElFTkSuQmCC); }实际效果如下感觉还行。。。v-model语法糖把内部的tag传递出去Vue内置了v-model指令v-model 是一个语法糖可以拆解为 props: value 和 events: input。就是说组件只要提供一个名为 value 的 prop以及名为 input 的自定义事件满足这两个条件使用者就能在自定义组件上使用 v-model// v-model语法糖 关键this.$emit(input, this.tags)// 使用方法tag-input v-modelres// 通过res获取内部状态组件的export相信很多人在用Vue使用别人的组件时会用到 Vue.use() 。例如Vue.use(VueRouter)、Vue.use(MintUI)。那这是为什么呐接下来我们自定义一个需要 Vue.use() 的组件也就是有 install 的组件。// index.jsimport TagInput from ./Tag-Input.vue;/* istanbul ignore next */TagInput.install function(Vue) { Vue.component(TagInput.name, TagInput);};export default TagInput;Tag-Input的全局注册// 引入组件import TagInput from /components/Tag-Input;Vue.use(TagInput)完整代码templatediv classtag-input-warp div classtag-item v-for(item, index) in tags :keyindex span classtag-text{{ item }}span span classtag-icon__close clickdeleteTagByIndex(index)span div input classtag-input keyup.spacegenerateTag autofocus v-modelvalue typetextdivtemplatescriptexport default {name: Tag-Input, data () {return {tags: [],value: } },methods: { generateTag () {if (this.value.trim().length 0) {this.tags.push(this.value)// v-model语法糖 关键this.$emit(input, this.tags) }this.value }, deleteTagByIndex (index) {this.tags.splice(index, 1) } }}scriptstyle scoped.tag-input-warp{width: 80%;height: 150px;border-radius: 5px;border: 1px solid #666;margin: auto;padding: 24px; }.tag-item, .tag-input{display: inline-block; }.tag-item{padding: 10px 14px;font-size: 14px;background-color: #f2f9ec;color: #84c259;border: 1px solid #e4fada;text-align: center;margin: 6px;/*vertical-align: middle;*/ }.tag-input{border: none;outline: none;color: #666666; }.tag-text{vertical-align: middle; }.tag-icon__close{cursor: pointer;vertical-align: middle;display: inline-block;width: 16px;height: 16px;background-size: contain;background-repeat: no-repeat;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgEAYAAAAj6qa3AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAAUO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAjdJREFUaN7t1t9LU2EcBvDndRtKR6YX4UQCJevCi26k6CI0vYluBAeObZgEUdFNSjfhRNtGh04qBHUKN6iLfkjtUFANTE7E8OxClzLIbqSZrMARNEr6gTr1vF2tiyLQ9e5sg/fzB7x8n4fzft8DcBzHcRzHcWwEA3OzZ89YLKzP9dJYY/d5q/Wq9FJ1dFVVsTq3jN2AEXqSVld/vrE68P3T/Pzl5mizO9jZySq4UPGps9MTm7uqrCb5WCw6Arwk3Zyl6ysYJYeAhSFpOgJDCmKCr6zXXJbt/peaP31AM9NYJgebCsHUhHCbPqBVf6pMvZs/9NrflZz5434Uxtwd/j9Yq12zV2TyWy3iGxw8b624VqamhKva8fd5JJiUaokzY0FDpX3oooVHBidBFoxG7EPB6Mk9P0nNNZvrx6xBJQ1XVSEdYmZjAF3SQY/X1pt6tF3qirc1D2kmIJJMlX8A/i9iD/fRdIoEe3CIHBcGo4FnMluB2lT9ZC5tjIyPwkCVYUym8xRsSbWoqG6c34ZAko4IbXkD2jv/1EEXAQCn8JTKsqx/JM9xR5ZzfTWKtoC/gv9xxwfHWuceqX19eI80DksSuultEgiFjC4ib8F3utVzfT6LRvbPTfRpR13R6elcn7OSK4JVcKOLYLYDzBfXxnTRZoOAxySl61hAmu5tafnfrT4otF55GPZ68ZosIj48jFEaJ2mfT1EUxeEwmVjNXzK8NEIdXZWVhZ6D4ziO47jS9wur727lgG2ewAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wNS0yOFQyMjowMzoyNiswODowMBt9NI0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDUtMjhUMjI6MDM6MjYrMDg6MDBqIIwxAAAASHRFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl92dXY4bmVpeTFjL2NoYWhhby5zdmc0h1nOAAAAAElFTkSuQmCC); }style写在最后本文写到这里其实还有一些功能没有实现希望大家留言讨论后续我将会继续发布button/dialog/icon/toast等等的组件的包教不包会系列, 来复盘我多年的组件化之旅。欢迎各位转发收藏。
