elementui tag
ElementUI Tag 组件使用指南
ElementUI 的 Tag 组件用于展示标签，支持多种样式和交互功能，适用于分类、标记等场景。
基本用法
通过 type 属性设置标签类型，可选值包括 success、info、warning、danger。默认值为空，显示为灰色标签。
<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="medium">中等标签</el-tag>
<el-tag size="small">小型标签</el-tag>
<el-tag size="mini">迷你标签</el-tag>动态编辑标签
结合输入框可实现动态添加标签的功能。
<el-tag
v-for="tag in dynamicTags"
:key="tag"
closable
@close="handleClose(tag)">
{{ tag }}
</el-tag>
<el-input
v-model="inputValue"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm">
</el-input>主题定制
通过 CSS 变量可自定义标签颜色。
:root {
--el-tag-primary-color: #409eff;
--el-tag-success-color: #67c23a;
--el-tag-warning-color: #e6a23c;
--el-tag-danger-color: #f56c6c;
}注意事项
动态编辑标签时需确保 v-for 的 key 唯一。关闭标签需处理数据更新逻辑，避免直接操作 DOM。尺寸属性需与整体 UI 风格保持一致。
