npm 包 ember-tags-input 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

ember-tags-input 是一个 Ember.js 的组件，用于实现类似 tags 的输入框，可以方便地添加、删除和编辑标签。它是基于 bootstrap-tagsinput 插件的 Ember.js 封装实现。

在实际的前端开发中，常常需要使用到 tags，如博客的分类、新闻的标签等，使用 ember-tags-input 可以方便地实现类似的功能。

本教程将详细介绍 ember-tags-input 的使用，包括安装、使用方法、常用属性、事件和插件的使用。

安装

前提是已经安装了 Ember.js。

使用 npm 安装 ember-tags-input：

npm install --save-dev ember-tags-input

使用方法

引入组件

在需要使用的模板文件中，可直接使用组件引入：

{{ember-tags-input tags=tags}}

其中，tags 为标签数组，可通过 tagsChanged 事件监听变化。

属性

ember-tags-input 支持以下属性：

属性	类型	描述	默认值
`tags`	`Array`	标签数组	`[]`
`typeahead`	`Array`/`Boolean`	是否启用自动补全	`false`
`freeInput`	`Boolean`	是否允许添加不在自动补全列表中的标签	`true`
`placeholder`	`String`	文本框为空时的提示信息	`null`
`maxTags`	`Number`	最多添加标签的数目	`null`
`allowDuplicates`	`Boolean`	是否允许添加重复的标签	`false`
`cancelConfirmKeys`	`Array`	取消和确认添加标签的快捷键	`[13, 188]`
`onTagClick`	`Function`	点击标签时的回调函数	`null`
`onChange`	`Function`	标签数组发生变化时的回调函数	`null`
`onBeforeTagAdded`	`Function`	添加标签前的回调函数	`null`
`onTagAdded`	`Function`	添加标签后的回调函数	`null`
`onBeforeTagRemoved`	`Function`	移除标签前的回调函数	`null`
`onTagRemoved`	`Function`	移除标签后的回调函数	`null`

具体使用方法可以参考插件的 GitHub 页面。

事件

ember-tags-input 提供以下事件：

事件	描述
`tagsChanged`	标签数组发生变化时触发
`tagClicked`	点击标签时触发
`beforeTagAdded`	添加标签前触发
`tagAdded`	添加标签后触发
`beforeTagRemoved`	移除标签前触发
`tagRemoved`	删除标签后触发

tagsChanged 事件的使用示例如下：

-- -------------------- ---- -------
------ ----- ---- --------

------ ------- -------------------------
  ----- ---

  -------- -
    -------------- -------------- -
      ------------------
    --
  --
---

这里将 tags 数组作为组件的属性传递给模板，通过事件 tagsChanged 监听标签数组的变化。

以下是完整的示例代码：

{{ember-tags-input
  tags=tags
  placeholder="Add tags"
  freeInput=true
  maxTags=5
  typeahead=typeahead
  onchange=(action "onTagsChanged")
}}

-- -------------------- ---- -------
------ ----- ---- --------

------ ------- -------------------------
  ----- --------- ------------- --------
  ---------- --------- ------------- ------- -------

  -------- -
    -------------- -------------- -
      ------------------
    --
  --
---

插件

ember-tags-input 还内置了一些插件，如：

highlighter：文本框中自动补全的项进行高亮显示
autocomplete：文本框自动补全
removeConfirm：删除标签时弹出确认框
bootstrap3：基于 Bootstrap3 样式的插件
bootstrap4：基于 Bootstrap4 样式的插件

引入插件的方式如下：

import Highlighter from 'ember-tags-input/plugins/highlighter';
import Autocomplete from 'ember-tags-input/plugins/autocomplete';
import RemoveConfirm from 'ember-tags-input/plugins/remove-confirm';
import Bootstrap3 from 'ember-tags-input/plugins/bootstrap3';
import Bootstrap4 from 'ember-tags-input/plugins/bootstrap4';

以自动补全插件 autocomplete 为例，使用方式如下：

{{ember-tags-input
  tags=tags
  typeahead=typeahead
  freeInput=true
  autocomplete=({source=typeahead})}
}}

总结

ember-tags-input 是一个方便实用的 Ember.js 组件，通过本教程，我们介绍了它的安装、使用方法、属性、事件和插件的使用，并提供了完整的示例代码。希望对您在实际的前端开发中有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1eca9e