elementui标签

ElementUI 标签组件使用指南

ElementUI 提供了一系列标签（Tag）组件，用于展示和交互。以下是常见用法和功能说明：

基础用法 通过 el-tag 组件可创建不同样式的标签，默认提供多种主题色：

<el-tag>默认标签</el-tag>
<el-tag type="success">成功标签</el-tag>
<el-tag type="info">信息标签</el-tag>
<el-tag type="warning">警告标签</el-tag>
<el-tag type="danger">危险标签</el-tag>

可关闭标签 添加 closable 属性实现可关闭功能，需配合 close 事件处理：

<el-tag 
  v-for="tag in tags" 
  :key="tag.name"
  closable
  @close="handleClose(tag)">
  {{tag.name}}
</el-tag>

尺寸控制 通过 size 属性调整标签大小，可选值：medium/small/mini

<el-tag size="small">小号标签</el-tag>

动态编辑 结合 input 组件实现动态标签编辑功能：

<el-tag
  v-for="tag in dynamicTags"
  :key="tag"
  closable
  @close="handleClose(tag)">
  {{tag}}
</el-tag>
<el-input
  v-if="inputVisible"
  v-model="inputValue"
  @keyup.enter.native="handleInputConfirm"
  @blur="handleInputConfirm">
</el-input>

样式定制 可通过以下 CSS 变量自定义样式：

--el-tag-font-size: 12px;
--el-tag-border-radius: 4px;
--el-tag-padding: 0 10px;

注意事项

1. 动态生成的标签需要确保 key 的唯一性
2. 移除标签时应同步更新数据源
3. 主题色需与项目整体配色方案协调
4. 移动端使用时建议增大点击区域

完整 API 文档参考 ElementUI 官方说明，包含 effect（明暗主题）、hit（边框高亮）等更多属性配置。