diff --git a/packages/devui-vue/devui/tag/src/hooks/use-class.ts b/packages/devui-vue/devui/tag/src/hooks/use-class.ts index 0a5015a92a..e5afcc476a 100644 --- a/packages/devui-vue/devui/tag/src/hooks/use-class.ts +++ b/packages/devui-vue/devui/tag/src/hooks/use-class.ts @@ -3,7 +3,9 @@ import { tagProps, TagProps } from '../tag-types' export default function (props: TagProps) { return computed(() => { - const { type, color } = props - return `devui-tag devui-tag-${type || (color ? 'colorful' : '') || 'default'}` + const { type, color, deletable } = props + return `devui-tag devui-tag-${type || (color ? 'colorful' : '') || 'default'} ${ + deletable ? 'devui-tag-deletable' : '' + }` }) } diff --git a/packages/devui-vue/devui/tag/src/tag.scss b/packages/devui-vue/devui/tag/src/tag.scss index 0ef0d58515..ea9cb49551 100644 --- a/packages/devui-vue/devui/tag/src/tag.scss +++ b/packages/devui-vue/devui/tag/src/tag.scss @@ -28,6 +28,9 @@ $devui-tag-normal-config: ( ), colorful: ( background-color: #fff + ), + deletable: ( + padding-right: 32px ) ); @@ -48,7 +51,7 @@ $devui-tag-normal-config: ( position: relative; cursor: default; - @each $type in default, primary, success, warning, danger, colorful { + @each $type in default, primary, success, warning, danger, colorful, deletable { &.devui-tag-#{$type} { @each $key, $value in map-get($devui-tag-normal-config, $type) { #{$key}: $value; @@ -66,8 +69,12 @@ $devui-tag-normal-config: ( line-height: 12px; border-radius: 50%; text-align: center; - position: relative; - top: -0.22em; - vertical-align: middle; + position: absolute; + top: 50%; + transform: translateY(-50%); + i { + /* 取消icon自带的偏移 */ + vertical-align: 0; + } } }