今天为大家带来一个基于Vue的标签生成组件。

背景

文章类页面一般都需要有标签来归类和检索,就会在编辑文章时需要创建标签的功能,标签是一个个独立的文字块。

需要实现的功能:

  • 输入框
  • 某种特定的操作触发生成标签
  • 校验输入的内容是否符合标准
  • 判断标签总字数是否超出
  • 删除标签

本文的主角便是实现这样一个功能的Vue组件——vue_tag_create

其实笔者遇到这样一个需求的时候,找过组件库,但并不完全符合要求,也找过有没有现成的包,同样体验不好,文档也不完善,索性自己写。

目前实现的功能:

  • 特殊字符校验
  • 超出字数校验
  • 添加标签
  • 删除标签
  • “删除图标”自定义
  • “占位文字”自定义
  • 错误提示布局选择

使用示例:

1
2
3
4
5
6
7
8
9
10
npm install vue_tag_create -S

import vue-tag-create from "vue_tag_create"

<vue-tag-create
:limit='20'
:inline="true"
:iconClass="iconClass"
:placeholder="placeholder">
</vue-tag-create>

注:目前已可用,不必安装多余依赖,Vue3版本未验证,应该也可以。

但是,还需要更多来自开发者的反馈,继续优化之后方可正式投入使用,更多功能和更好的体验等你来一起定义,欢迎vue_tag_create提issue。