Vue-input-tag 使用指南

Vue-input-tag 使用指南

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

事件(Events)

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

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

结语

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

vue-input-tag :bookmark: Vue.js 2.0 Input Tag Component vue-input-tag 项目地址: https://gitcode.com/gh_mirrors/vu/vue-input-tag

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贺琪歌Francesca

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值