js实现标签

实现标签功能的方法

使用HTML和CSS创建基础标签样式

通过HTML的<span>或<div>元素结合CSS可以快速实现标签的视觉样式：

<span class="tag">JavaScript</span>

.tag {
  display: inline-block;
  padding: 4px 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-right: 6px;
  font-size: 14px;
}

动态生成标签的JavaScript实现

通过DOM操作动态添加和删除标签：

function addTag(text, containerId) {
  const container = document.getElementById(containerId);
  const tag = document.createElement('span');
  tag.className = 'tag';
  tag.textContent = text;

  const closeBtn = document.createElement('span');
  closeBtn.textContent = '×';
  closeBtn.onclick = () => tag.remove();

  tag.appendChild(closeBtn);
  container.appendChild(tag);
}

标签输入框的实现

创建带自动完成功能的标签输入框：

const tagInput = document.getElementById('tag-input');
tagInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ',') {
    e.preventDefault();
    const value = tagInput.value.trim();
    if (value) {
      addTag(value, 'tags-container');
      tagInput.value = '';
    }
  }
});

存储标签数据

将标签数据保存在数组中便于后续处理：

let tags = [];

function updateTagsArray(newTag) {
  if (!tags.includes(newTag)) {
    tags.push(newTag);
    console.log('Current tags:', tags);
  }
}

响应式标签组件

使用现代前端框架实现响应式标签组件（以Vue为例）：

Vue.component('tag-component', {
  props: ['text'],
  template: `
    <span class="tag">
      {{ text }}
      <button @click="$emit('remove')">×</button>
    </span>
  `
});

标签云特效实现

创建具有随机大小和颜色的标签云效果：

function generateTagCloud(tags, containerId) {
  const container = document.getElementById(containerId);
  tags.forEach(tag => {
    const size = Math.floor(Math.random() * 10) + 14;
    const hue = Math.floor(Math.random() * 360);
    const tagEl = document.createElement('span');
    tagEl.className = 'tag-cloud-item';
    tagEl.textContent = tag;
    tagEl.style.fontSize = `${size}px`;
    tagEl.style.color = `hsl(${hue}, 70%, 50%)`;
    container.appendChild(tagEl);
  });
}

可拖拽排序标签

实现可交互拖拽排序的标签组：

new Sortable(document.getElementById('tags-container'), {
  animation: 150,
  ghostClass: 'sortable-ghost'
});