关于 Tag 组件开发相关

[Tyh2001]

说明

FTag 组件由 konvyi 进行开发

配置项

下面介绍一下配置项：

• type 类型，也就是相当于按钮的类型一致的属性 default primary success danger warning info 这种类似
• size 尺寸，包含一些可选值
• round 是否为圆角
• simple 是否为简约的，也就是相当于你现在的 theme 属性类型
• color 自定义颜色
• block 是否为块级别元素
• font-size 字体大小
• close 是否显示关闭按钮

配置项的 type 和 size 属性均使用 fighting-theme/config 的变量属性，保证样式统一性

还有比如说：

• icon 配置 icon

或者还有背景色、边框色等配置可选项

可以根据上面配置再进行优化

另外

另外更多配置可以根据实际的需求或者业务需要来随时增加

[Tyh2001]

介绍

Tag 标签 是用于标记或者选择使用的一个组件。

写的如何？

你提交的 feat: 增加 tag 配置项 & 更新 tag 文档，将 Tag 组件展示的还是非常不错的，样式细节处理的也不错，就是实现的方式有点不是很好。

下面分别说一下，可以根据描述进行优化：

解构获取 Props

如果在一个函数中，你用到了大量的 props，可以将其解构使用，简化代码

const { type, round, simple, block } = prop

样式优先使用 Css 解决

要注意一个原则就是：能使用 css 解决的，优先使用 css 解决，因为使用 css 解决样式的性能一定比 js 要好。

详情可以参考这篇讨论关于样式权重问题

tag 组建内部基本上没什么业务逻辑，基本上都是样式的问题，其实完全可以通过作用不同的 class 类名来实现不同的样式形态，比如下面是一段 button 组件的代码：

const classList: ComputedRef<object | string[]> = computed(
  (): object | string[] => {
    const {
      type,
      round,
      simple,
      block,
      disabled,
      loading,
      blob,
      size,
      text,
      circle,
      color,
    } = prop

    return [
      'f-button',
      {
        [`f-button-${type}`]: type,
        [`f-button-${size}`]: size,
        'f-button-disabled': disabled || loading,
        'f-button-simple': simple && !color,
        'f-button-circle': circle,
        'f-button-round': round,
        'f-button-block': block,
        'f-button-blob': blob,
        'f-button-text': text && !color,
      },
    ]
  }
)

基本上一个计算属性将所有的样式都进行了区分，作用不同的类名实现效果

优先使用 i 而不是 f-icon

我们知道，Fighting Design 内部已经实现了 FIcon 组件，用于展示 icon。但是，在其它组件中，若需要使用 Icon 的话，优先使用 <i /> 标签来展示，因为这样组件的打包体积相对于使用 <f-icon /> 肯定是有所减小的。

使用 <i /> 只需要作用一个公共的类名，再加上一个指定 icon 的名称即可实现，比如：

<i :class="['f-icon', rightIcon]" />

使用内部组件需要引入

上面说到，在组件中是可以直接使用 f-icon 组件的，因为我们是全局注册使用的，所以在项目的任何地方你都可以使用到 Fighting Design 的任何组件，虽然如此，在开发的时候，你也需要将其引入再进行使用。

为什么呢？因为如果用户在使用的时候，通过按需引入的方式，并没有全部引入。如果你在 tag 中依赖了 f-icon，在你没有引入组件的情况下，是不会将 f-icon 打包到 tag 组件中的，这很可能会导致它并不会正常的工作。

很有可能在使用 tag 的时候，需要连续引入两个组件才可以正常使用：

import { FTag, FIcon } from 'fighting-design'

那么为了避免这种事情发生，如果使用内部组件一定要记得引入再使用！