Vue-input-tag 使用指南

最新推荐文章于 2025-06-04 11:50:19 发布

原创最新推荐文章于 2025-06-04 11:50:19 发布 · 861 阅读

9 ·

CC 4.0 BY-SA版权

Vue-input-tag 使用指南

vue-input-tag :bookmark: Vue.js 2.0 Input Tag Component 项目地址: https://gitcode.com/gh_mirrors/vu/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 | 添加前对标签进行处理的函数，例如转换成大写。