简介
itomic-vue-input-tag 是一个基于 Vue.js 的输入框组件，用于输入多个标签。它支持自定义样式和事件，并提供了多个属性以定制标签的显示和行为。使用它可以方便地为前端项目添加标签输入功能。
安装
在终端窗口中使用 npm 安装 itomic-vue-input-tag：
npm install itomic-vue-input-tag
需要注意的是，itomic-vue-input-tag 需要 Vue.js 2 和 Bootstrap 4 的支持。
使用
在 Vue.js 应用中导入 itomic-vue-input-tag：
import Vue from 'vue'; import itomicVueInputTag from 'itomic-vue-input-tag'; Vue.use(itomicVueInputTag);
在 HTML 文件的模板中使用 itomic-vue-input-tag：
<itomic-vue-input-tag v-model="tags"></itomic-vue-input-tag>
其中，v-model 绑定了一个名为 tags 的数组对象，它用于存储输入的标签。可以添加 additional-input-attributes 属性以提供额外的输入框属性：
-- -------------------- ---- ------- ---------- ----- --------------------- -------------- ------------------------------------------- ---- - ----- ---------- ------------------------------ ------ ----------- -------- ------ - ----------------- - ---- ----------------------- ------ ------- - ----------- - ------------------ -- ------ - ------ - ----- -------- ------ -------------- -- -- -- ---------展开代码
此时，输入框的 placeholder 为 "Add a tag"，并自动获得焦点。
属性
itomic-vue-input-tag 提供以下属性以控制标签的显示和行为：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| inputValue | string | '' | 输入框中的值 |
| placeholder | string | 'Add tag' | 占位符，展示在输入框中 |
| maxTags | number | 0 | 最多输入多少个tag，0 可以输入无限个tag |
| separator | string | ',' | 输入 tag 时使用的分隔符 |
| allowDuplicates | boolean | false | 标志位，表明是否允许输入重复的 tag |
| inputClass | string | '' | 自定义输入框class |
| tagClass | string | 'badge badge-secondary' | 自定义 tag 的 class |
| autofocus | boolean | false | 标志位，表明是否自动触发输入框焦点 |
| clearOnBlur | boolean | false | 标志位，表明是否在失去焦点时清空输入框 |
| clearOnEsc | boolean | false | 标志位，表明是否在按下 Esc 键时清空输入框 |
| clearOnInput | boolean | false | 标志位，表明是否在输入框内容改变时清空输入框 |
| placeholderWhenEmpty | boolean | true | 标志位，表明是否只有当输入框中没有内容时，占位符才会被展示 |
| removeTagSymbol | string | '×' | 标志位，表明删除 tag 的符号 |
| validator | function | () => true | 标志位，表明输入框内容的验证函数 |
事件
itomic-vue-input-tag 支持以下事件：
| 事件名 | 参数 | 描述 |
|---|---|---|
| before-tag-added | tag | 在添加 tag 之前调用，如果返回 false，将取消 tag 的添加 |
| tag-added | tag | 在添加 tag 之后调用 |
| before-tag-removed | tag | 在移除 tag 之前调用，如果返回 false，将取消 tag 的移除 |
| tag-removed | tag | 在移除 tag 之后调用 |
| input-changed | value | 在输入框内容改变时调用，参数 value 是输入框中的新值 |
| input-blurred | value | 在输入框失去焦点时调用，参数 value 是输入框中的值 |
| input-focused | 在输入框获得焦点时调用 |
可以通过在模板中绑定事件处理函数来监听这些事件。例如，下列代码会在添加 tag 和移除 tag 时触发事件，打印出 tag 及当前输入框中的所有 tag：
<itomic-vue-input-tag v-model="tags" @tag-added="onTagAdded" @tag-removed="onTagRemoved" ></itomic-vue-input-tag>
-- -------------------- ---- ------- ------ ------- - -------- - --------------- ----- - ------------------ ------ ----- -------------------- ------- ------ -- ----------------- ----- - -------------------- ------ ----- -------------------- ------- ------ -- -- --展开代码
总结
itomic-vue-input-tag 是一个非常实用的 Vue.js 组件，可以为前端项目添加标签输入和展示功能。通过本篇文章，我们学习了如何使用它，并了解了其重要的属性和事件。使用 itomic-vue-input-tag，可以让项目更加丰富和立体，为用户带来更好的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005737b81e8991b448e96da
