Tagify 使用教程

Tagify 使用教程

tagify 🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue 项目地址: https://gitcode.com/gh_mirrors/ta/tagify

1. 项目介绍

Tagify 是一个轻量级、高效的标签输入组件，适用于 Vanilla JS、React、Angular 和 Vue 等框架。它可以将输入框或文本区域转化为一个标签组件，以简单、可定制的方式添加标签，同时拥有出色的性能和小的代码体积。Tagify 拥有丰富的特性，包括但不限于混合内容支持、单值模式、白名单/黑名单支持、自定义 HTML 模板、自动建议输入、标签验证、可编辑标签、无障碍支持等。

2. 项目快速启动

以下是使用 Tagify 的基本步骤：

首先，您可以通过 CDN 引入 Tagify：

<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />

或者，通过 npm 安装 Tagify 作为 Node 模块：

npm i @yaireo/tagify --save

然后，在您的 JavaScript 代码中，创建一个 Tagify 实例：

import Tagify from '@yaireo/tagify';

var inputElem = document.querySelector('input');
var tagify = new Tagify(inputElem, {
  whitelist: ['foo', 'bar', 'and baz', 0, 1, 2]
});

确保在项目中包含 tagify.css 文件。

3. 应用案例和最佳实践

动态添加标签

tagify.addTags(['banana', 'orange', 'apple']);
// 或者添加带有预定义属性的标签
tagify.addTags([
  { value: 'banana', color: 'yellow' },
  { value: 'apple', color: 'red' },
  { value: 'watermelon', color: 'green' }
]);

获取标签值

可以通过两种方式获取标签值：

• 访问 Tagify 实例的 value 属性：

console.log(tagify.value); // 数组形式的标签

• 访问原始输入元素的值：

var inputElm = document.querySelector('input');
inputElm.addEventListener('change', function(e) {
  console.log(e.target.value); // 字符串形式的标签
});

修改原始输入值格式

默认格式是 JSON 字符串。如果要修改格式，可以这样做：

var tagify = new Tagify(inputElem, {
  originalInputValueForm: 'new_format'
});

确保标签值中没有逗号，以避免格式错误。

4. 典型生态项目

Tagify 可以与多种前端框架和库集成，例如：

• 在 React 中使用 Tagify：

import ReactTagify from '@yaireo/tagify';

function App() {
  return (
    <ReactTagify
      tagify={new Tagify(...)}
    />
  );
}

• 在 Vue 中使用 Tagify：

import Vue from 'vue';
import Tagify from 'vue-tagify';

Vue.use(Tagify);

• 在 Angular 中使用 Tagify：

import { Component } from '@angular/core';
import { TagifyModule } from 'tagify';

@Component({
  selector: 'app-root',
  template: '<tagify [(ngModel)]="tags"></tagify>'
})
export class AppComponent {
  tags = ['initial tag'];
}

这些框架的集成方式可能会随着版本的更新而改变，请参考各自的官方文档以获取最新信息。

tagify 🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue 项目地址: https://gitcode.com/gh_mirrors/ta/tagify