fix: 修复关闭icon没有垂直居中的bug (#173)

Author: c0dedance

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' : ''
+ }`
  })
 }

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;
+ }
  }
 }