npm 包 ember-tag-search-input 使用教程

介绍

ember-tag-search-input 是一个能够实现搜索和添加标签的 Ember 组件。使用该组件能够大大提升网站的交互体验，方便用户快速查找和添加标签，同时也能够减轻开发人员的负担。本文将详细介绍该组件的使用教程，包括安装、配置参数、示例代码等内容。

安装

使用 npm 命令进行安装：

npm install ember-tag-search-input

使用示例

在使用 ember-tag-search-input 之前，需要先将其引入项目中：

import Ember from 'ember';
import TagSearchInputComponent from 'ember-tag-search-input/components/tag-search-input';

export default Ember.Controller.extend({
  TagSearchInputComponent
});

然后就可以在模板文件中进行使用了：

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

在上述代码中，我们设置了一些参数来控制组件的行为：

• search：搜索标签的提示文字；
• placeholder：输入标签时的提示文字；
• selectedTags：已选中的标签列表；
• availableTags：所有可选的标签列表；
• onchange：输入框输入变化的回调函数；
• onenter：回车输入标签时的回调函数；
• onremove：删除标签时的回调函数；
• onadd：添加新标签时的回调函数。

示例代码：

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

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

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

参数

tag-search-input 组件参数：

结束语

以上是使用 npm 包 ember-tag-search-input 的详细教程和示例代码，希望能够帮助大家更加方便地实现标签的搜索和添加。使用该组件能够大大提升网站的交互体验，同时也能够帮助开发人员提高开发效率。欢迎大家使用并提供意见和反馈，共同推动开源社区的发展。

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