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

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部