vue组件系列－Tags input

newtrek 发布于2019-08-19 18:36 / 1975人阅读

摘要：前言最近做后台系统的组件化开发，借机和二胖手同学一起开发了一个基于的开源组件库，方便后期使用，目前该项目正在持续开发中。

前言

最近做后台系统的组件化开发，借机和@二胖手同学一起开发了一个基于vue的开源组件库，方便后期使用，目前该项目正在持续开发中。

介绍

大家可能遇到过一种需求，让用户输入以某个特殊字符分隔的字符串，如java,php就是以西文逗号分隔，这种输入需要用户自行添加内容之间的特殊分隔符，其实完全可以换用一种用户体验更好的方式解决。
不知道大家管下面这种叫什么，我称之为Tags input。

其实，当大家在SF写文章的时候就会有这类标签选择框。体验地址

实现 scss

//输入框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

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79752.html

vue分析之template模板解析AST

摘要：注意看注释很粗很简单，我就是一程序员姓名，年龄，请联系我吧是否保留注释定义分隔符，默认为对于转成，则需要先获取，对于这部分内容，做一个简单的分析，具体的请自行查看源码。其中的负责修改以及截取剩余模板字符串。通过查看vue源码，可以知道Vue源码中使用了虚拟DOM（Virtual Dom），虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数最终返回...

2bdenny 2019-08-22 18:24 评论0 收藏0
搭建一个通用的脚手架

摘要：在年年底的时候，同事聊起脚手架。由于公司业务的多样性前端的灵活性让我们不得不思考更通用的脚手架。针对开发使用的脚手架针对项目创建项目通用脚手架是一款强壮的且有一系列工具的通用型脚手架，但发布指定名称，和用其开发工具。在16年年底的时候，同事聊起脚手架。由于公司业务的多样性,前端的灵活性,让我们不得不思考更通用的脚手架。而不是伴随着前端技术的发展，不断的把时间花在配置上。于是chef-...

187J3X1 2019-08-23 15:24 评论0 收藏0
参考ElementUI的文档实现方案，实现自己组件库的说明文档

摘要：实现使用编写的个人组件库说明文档前一篇文章实现了按需加载封装个人的组件库功能，有了组件库，当然还要有配套说明文档，这样使者用起来才更方便。特别说明本文中有部分实现是了的代码实现的。实现使用markdown编写的个人组件库说明文档前一篇文章实现了按需加载封装个人的组件库功能，有了组件库，当然还要有配套说明文档，这样使者用起来才更方便。打包完成的dist目录是最终可放到服务器中，直接访...

NervosNetwork 2019-08-23 11:54 评论0 收藏0
fish-ui 一套基于vue2的ui组件库

摘要：一套基于开发的桌面版组件库部分主要借鉴了安装快速开始导入所有组件按需导入组件实例特性所有组件浏览器支持 showImg(https://segmentfault.com/img/remote/1460000012350222?w=364&h=113); fish-ui 一套基于vue2开发的桌面版ui组件库, css部分主要借鉴了semantic-uigit: https://git...

KavenFan 2019-08-21 17:48 评论0 收藏0