vue组件系列-Tags input
前言
最近做后台系统的组件化开发,借机和@二胖手同学一起开发了一个基于vue的开源组件库,方便后期使用,目前该项目正在持续开发中。
介绍
大家可能遇到过一种需求,让用户输入以某个特殊字符分隔的字符串,如java,php就是以西文逗号分隔,这种输入需要用户自行添加内容之间的特殊分隔符,其实完全可以换用一种用户体验更好的方式解决。
不知道大家管下面这种叫什么,我称之为Tags input。
其实,当大家在SF写文章的时候就会有这类标签选择框。体验地址
实现
sass
//输入框tags.tags-wrap{ width: 100%; height: 100%; outline: none; &::after{ content: ""; display: block; height: 0; clear: both; }}.tags, .tags-input{ position: relative; float: left; color: # fff; line-height: 28px; margin: 0 4px 4px 0; padding: 0 22px 0 10px; border-radius: 6px; .content{ line-height: 28px; } .del{ width: 22px; height: 28px; text-align: center; cursor: pointer; position: absolute; top: -1px; right: 0; }}.tags-input{ font-size: 14px; padding: 0; background-color: inherit; border: none; color: inherit; width: 10em;}
整个Tags input输入框的宽度由组件的父元素决定,高度由Tags自身决定,会根据内容自动撑开。
vue组件
vue template
{{item.text}}×
v-for是vue的遍历数组方法,:style用来绑定样式,@click和@keyup这些都是绑定事件的语法。
vue data
props: { source: { type: Array, default: [] }},data() { var dis_source = [] this.source.forEach(function (item) { var obj = { text: item, bgc_no: Math.ceil(Math.random() * 10) - 1 } dis_source.push(obj) }) return { text: '', bgc: ['# e961b4', '# ed664b', '# 7b6ac7', '# 56abd1', '# f7af4c', '# fe5467', '# 52c7bd', '# a479b7', '# cb81ce', '# 5eabc5'], dis_source: dis_source }}
数据有两部分,props来源于父组件,用于同步父子组件的内容,data中的是经过我处理的用于展示的数据,为每个标签添加随机的背景色。
vue methods
add(text){ if(text != ''){ var count = this.source.length this.source.$set(count, text) this.dis_source.$set(count, { text: text, bgc_no: Math.ceil(Math.random() * 10) - 1 }) this.text = '' } }, del(index, way){ if(way){ if(index >=0 && this.text == ''){ this.source.splice(index, 1) this.dis_source.splice(index, 1) } }else { this.source.splice(index, 1) this.dis_source.splice(index, 1) } }
就这个组件而言只需要增加/删除tags两个方法,我在模版中删除tags的方法分为两种,两种的处理情况略有不同要加以判断。
使用
html:js: var app = new Vue({ el: '# app', data: { source: ['英雄联盟', '骚猪', '对对对对对我是娇妹', '小轩在不在'] }, components: { 'v-tags': tags } })
使用时只要把vue和我的组件引入,就可以在页面中使用自定义的v-tags标签,同时把数据传给子组件并且加上.sync保持数据与子组件同步。在该组件中,用户可以在标签框中输入内容后按下enter即可添加新标签,使用delete删除处于末尾的标签,或者也可以点击标签后面的叉叉删除标签。
除了这个组件之外,我们还开源了其他组件,并且在逐步完善组件库,其他组件也会有系列文章推出,欢迎关注我和@二胖手的专栏,提出意见,或者你期望增加的组件,项目地址:web-style
关键字:vue.js, tag, 组件化, JavaScript
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!