【亲测免费】 Vue-input-tag 使用指南

Vue-input-tag 是一个基于 Vue.js 2.0 的标签输入组件，设计灵感源自 react-tagsinput。该组件提供了一个简洁的方式让用户能够输入并管理一组标签，适用于多分类选择、关键词标记等多种场景。

安装指南

NPM 或 Yarn 方式

若您的项目是通过 NPM 或 Yarn 管理依赖，可以采用以下命令进行安装：

npm install vue-input-tag --save

或者如果您偏好 Yarn：

yarn add vue-input-tag

安装完成后，需要在您的 Vue 应用中导入并注册此组件：

import InputTag from 'vue-input-tag';

Vue.component('input-tag', InputTag);

CDN 方式

对于不使用包管理工具的项目，可以直接通过 CDN 引入 Vue 和 vue-input-tag：

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-input-tag"></script>

<script>
  // 注册组件
  Vue.component('input-tag', vueInputTag.default);
</script>

项目使用说明

使用 vue-input-tag 非常直观，只需在模板部分添加如下代码：

<input-tag v-model="tags"></input-tag>

其中 tags 是用于存储当前输入标签的数组变量，您需要在 Vue 实例的 data 属性中定义它。

data() {
  return {
    tags: []
  };
},

项目API使用文档

属性（Props）

属性	类型	默认值	描述
value	Array	[]	要渲染的标签列表。
placeholder	String	""	当没有标签时显示的占位符文本。
readOnly	Boolean	false	是否设置输入框为只读。
addTagOnBlur	Boolean	false	在输入框失去焦点时添加标签。
limit	String或Number	-1（无限制）	标签数量上限。
validate	String或Function或Object	""	用于验证用户输入的校验器，支持“email”，“url”，“text”，“digits”，“isodate”等，或自定义函数。
addTagOnKeys	Array	[13, 188, 9]	指定哪些按键将添加新标签。
allowDuplicates	Boolean	false	是否允许重复标签。
beforeAdding	Function	null	添加前对标签进行处理的函数，例如转换成大写。

事件（Events）

事件名	参数	描述
input	Array	当添加（验证成功后）或删除标签时触发。
update:tags	Array	与 input 事件相同，提供了另一种监听标签变化的方式。

通过监听这些事件，您可以实现如保存用户输入的逻辑。

结语

至此，您已掌握了使用 vue-input-tag 创建和管理标签的基本方法。通过灵活运用其属性和事件，可以进一步定制化以满足不同应用场景的需求。希望本文档能够帮助您高效地集成并利用这个强大的Vue组件。