# Tag 标签 ## 基本用法 设置 `type` 修改标签类型。 ```html 标签 标签 标签 标签 标签 ``` ```scss :deep(.space) { margin: 0 10px 10px; } ``` ## 幽灵标签 设置 `plain` 属性。 ```html 标签 标签 标签 标签 标签 ``` ## 标记标签 设置 `mark` 属性。 ```html 标签 标签 标签 标签 标签 ``` ## 幽灵标记标签 同时设置 `mark` 和 `plain` 属性。 ```html 标签 标签 标签 标签 标签 ``` ## 圆角标签 设置 `round` 属性。 ```html 标签 标签 标签 标签 标签 ``` ## 设置图标 设置 `icon` 左侧图标，也可以使用 'icon' 的 slot 插槽,此时要开启`use-icon-slot`。 ```html 标签 插槽 ``` ## 自定义颜色 设置 `color` 修改文字颜色，设置 `bg-color` 修改背景色和边框颜色。 ```html 标签 标签 ``` ## 可关闭 设置 `closable` 属性，允许标签关闭，关闭时会触发 `close` 事件。 ```html 标签 ``` ## 新增标签 设置 `dynamic` 属性，该标签为新增样式，输入内容确定后触发 `confirm` 事件。 ```html {{item}} ``` ```typescript const tags = ref(['标签一', '标签二']) function handleClose(order) { tags.value = tags.value.filter((value, index) => index !== order) console.log('close:index' + order) } function handleConfirm({ value }) { if (!value) return tags.value = [...tags.value, value] } ``` ## 事件 ```html {{tag.value}} ``` ```typescript const tags = ref([ { plain: true, closable: true, type: 'primary', value: '标签一' } ]) function handleClick(index) { console.log('click:index' + index) } function handleClose(order) { tags.value = tags.value.filter((value, index) => index !== order) console.log('close:index' + order) } ``` ## Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | ------------- | ------------------------ | ------- | ------------------------------------ | ------ | -------- | --- | | type | 标签类型 | string | primary / danger / warning / success | - | - | - | | plain | 幽灵类型 | boolean | - | false | - | | mark | 标记类型 | boolean | - | false | - | | round | 圆角类型 | boolean | - | false | - | | icon | 左侧图标 | string | - | - | - | | color | 文字颜色 | string | - | - | - | | bg-color | 背景色和边框色 | string | - | - | - | | closable | 可关闭(只对圆角类型支持) | boolean | - | false | - | | use-icon-slot | 开启图标插槽 | boolean | - | false | - | | dynamic | 新增标签 | boolean | - | false | - | ## Events | 事件名称 | 说明 | 参数 | 最低版本 | | ------------ | -------------------------- | ----------- | -------- | | click | 标签点击时触发 | event | - | | close | 点击关闭按钮时触发 | event | - | | confirm | 新增标签输入内容确定后触发 | `{ value }` | - | ## Slots | name | 说明 | 最低版本 | | ---- | ---- | -------- | | icon | 图标 | - | ## 外部样式类 | 类名 | 说明 | 最低版本 | | ------------ | ---------- | -------- | | custom-class | 根节点样式 | - |