🚀 使用 Vue 3 和 TypeScript 构建动态 InputTags 组件

使用 Vue 3 和 TypeScript 构建动态 InputTags 组件

处理动态列表（例如用户添加或删除的标签）是现代用户界面中的常见任务。在本文中，我们将探讨如何使用 Vue 3 和 TypeScript 构建交互式 **InputTags** 组件。

InputTags 组件的功能

我们的组件将支持以下内容：

按 Enter 键添加标签。

单击按钮删除标签。

即使单击嵌入的 SVG 图标也能防止事件冲突。

InputTags 组件：代码

1.模板

以下模板使用一个简单的结构：一个标签列表和一个输入字段。

2. 剧本

在脚本中，我们使用 Vue 的 Composition API 和 TypeScript 来管理标签列表、添加和删除它们。

代码解释

让我们分解一下 InputTags 组件的工作原理：

1. 添加标签

事件触发器：keyup.enter 事件监听 Enter 键按下。

输入处理：当事件被触发时，组件使用（e.target as HTMLInputElement).value 检索输入字段的值。

验证：修剪输入值以删除不必要的空格，并检查以确保其不为空。

更新状态：如果有效，则使用 tags.value.push(input) 将新标签添加到标签数组中。

重置输入：最后，通过将输入字段的值设置为空字符串来清除输入字段。

const addTag = (e: KeyboardEvent): void => {
  const input = (e.target as HTMLInputElement).value.trim();

  if (input) {
    tags.value.push(input);
  }

  (e.target as HTMLInputElement).value = "";
};

2. 删除标签

事件触发器：单击标签旁边的按钮将触发 removeTag 方法。

数组修改：splice 方法从标签数组中删除指定索引处的标签。

const removeTag = (index: number): void => {
  tags.value.splice(index, 1);
};

3. 防止嵌套点击事件冲突

问题：单击按钮内的 SVG 图标会触发父按钮的单击事件，从而导致意外行为。

解决方案：在 SVG 上使用 v-on:click.stop 来阻止事件传播到父元素。

结论

在 Vue 3 中构建 **InputTags** 组件是掌握事件处理、Composition API 和动态数据操作的绝佳练习。请随意自定义此组件以满足您的需求，并在评论中分享您的想法！

CLIS.CC