fix(tag): 修复Tag标签primary类型选中状态下，关闭按钮颜色与背景色一致 (close DevCloudFE#1539)

Author: vaebe

packages/devui-vue/devui/tag/src/tag.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, watch, onUnmounted } from 'vue';
+import { defineComponent, toRefs, watch, onUnmounted, computed } from 'vue';
 import { tagProps, TagProps } from './tag-types';
 import { useClass, useColor } from './composables';
 import { useNamespace } from '../../shared/hooks/use-namespace';
@@ -23,17 +23,23 @@ export default defineComponent({
  e.stopPropagation();
  emit('tagDelete', e);
  };
+
+ // 计算内容的颜色
+ const contentColor = computed(() => {
+ return isDefaultTag() ? '' : checked.value ? '#fff' : themeColor.value;
+ });
+
+ // 关闭icon
  const closeIconEl = () => {
+ const iconName = isDefaultTag() ? 'error-o' : 'close';
+
  return deletable.value ? (
  <a class="remove-button" onClick={handleDelete}>
- {isDefaultTag() ? (
- <d-icon size="12px" name="error-o" color="#adb0b8" />
- ) : (
- <d-icon size="12px" name="close" color={themeColor.value} />
- )}
+ <d-icon size="12px" name={iconName} color={contentColor.value} />
  </a>
  ) : null;
  };
+
  const unWatch = watch(checked, (newVal) => {
  emit('checkedChange', newVal);
  });
@@ -45,7 +51,7 @@ export default defineComponent({
  class={tagClass.value}
  style={{
  display: 'block',
- color: checked.value ? '#fff' : themeColor.value,
+ color: contentColor.value,
  backgroundColor: checked.value ? themeColor.value : !color.value ? '' : 'var(--devui-base-bg, #ffffff)',
  }}
  title={tagTitle}>