-
Dark
+
+ Dark
{{ item.label }}
@@ -13,15 +13,15 @@
{{ item.label }}
-
+
Plain
import { ref } from 'vue'
-const items = ref([
+import type { TagProps } from 'element-plus'
+
+type Item = { type: TagProps['type']; label: string }
+
+const items = ref>([
{ type: '', label: 'Tag 1' },
{ type: 'success', label: 'Tag 2' },
{ type: 'info', label: 'Tag 3' },
diff --git a/packages/components/tag/src/tag.ts b/packages/components/tag/src/tag.ts
index 7476cda451..048ee25b2f 100644
--- a/packages/components/tag/src/tag.ts
+++ b/packages/components/tag/src/tag.ts
@@ -27,6 +27,7 @@ export const tagProps = buildProps({
values: ['dark', 'light', 'plain'],
default: 'light',
},
+ round: Boolean,
} as const)
export type TagProps = ExtractPropTypes
diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue
index 5a76daabe2..89ce471589 100644
--- a/packages/components/tag/src/tag.vue
+++ b/packages/components/tag/src/tag.vue
@@ -45,7 +45,7 @@ const emit = defineEmits(tagEmits)
const tagSize = useSize()
const ns = useNamespace('tag')
const classes = computed(() => {
- const { type, hit, effect, closable } = props
+ const { type, hit, effect, closable, round } = props
return [
ns.b(),
ns.is('closable', closable),
@@ -53,6 +53,7 @@ const classes = computed(() => {
ns.m(tagSize.value),
ns.m(effect),
ns.is('hit', hit),
+ ns.is('round', round),
]
})
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 3aa225f629..f300f564c1 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -886,6 +886,7 @@ $tag: map.merge(
(
'font-size': 12px,
'border-radius': 4px,
+ 'border-radius-rounded': 9999px,
),
$tag
);
diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss
index 26aeed466b..9a405e1b9d 100644
--- a/packages/theme-chalk/src/tag.scss
+++ b/packages/theme-chalk/src/tag.scss
@@ -78,6 +78,9 @@ $tag-icon-span-gap: map.merge(
@include when(hit) {
border-color: getCssVar('color', 'primary');
}
+ @include when(round) {
+ border-radius: getCssVar('tag', 'border-radius-rounded');
+ }
.#{$namespace}-tag__close {
color: var(--el-tag-text-color);