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组件。
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考