关于 Divider 组件开发相关

[Tyh2001]

说明

FDivider 组件由 tanhh326 进行开发

计算操作优先使用计算属性

原代码：

<template>
  <div :class="['f-divider', `f-divider-${direction}`]">
    <span
      v-if="renderSlot(direction)"
      :class="['f-divider-text', `f-divider-text-${textAlign}`]"
    >
      <slot />
    </span>
  </div>
</template>

<script lang="ts" setup name="FDivider">
  import { useSlots } from 'vue'
  import { Props } from './divider'
  defineProps(Props)
  const renderSlot = (direction: string) => {
    return direction === 'horizontal' && Boolean(useSlots().default)
  }
</script>

修改后：

<template>
  <div :class="['f-divider', `f-divider-${direction}`]">
    <span
      v-if="renderSlot"
      :class="['f-divider-text', `f-divider-text-${textAlign}`]"
    >
      <slot />
    </span>
  </div>
</template>

<script lang="ts" setup name="FDivider">
  import { useSlots, computed } from 'vue'
  import { Props } from './divider'
  import type { ComputedRef } from 'vue'

  const prop = defineProps(Props)

  const renderSlot: ComputedRef<boolean> = computed((): boolean => {
    return prop.direction === 'horizontal' && Boolean(useSlots().default)
  })
</script>

或许你需要注意的是：

• 原代码中，使用函数方式多了传参的步骤，这种直接返回结构优先使用计算属性
• 要标明函数返回值的类型
• 计算属性的变量名的类型为 ComputedRef<返回值类型> 来标记
• ComputedRef 需要引入使用： import type { ComputedRef } from 'vue'

拼写错误

原代码：

import type { textAliagn, direction } from '@fighting-design/fighting-type'

textAliagn 拼写错误，应该是：textAlign

建议下载 vs code 插件 Code Spell Checker 进行拼写检查

建议

可以将 textAlign 属性改为 position 会更加专业些

格式规范

• 字符串全部使用单引号
• 去掉末尾的分号
• tab 始终为两个空格

最新的 @fighting-design/fighting-components 已更新

[JayMeDotDot]

关于color、margin 以及增加 divider 组件可选样式的建议

• 最外层 color 属性去除后并不影响 divider 颜色
• 当开发者未设置 margin，是否移除 margin: 0 的默认设置
• divider 组件是否可以增加 虚线或圆点 等类型的分割线样式

[Tyh2001]

我认为是可以的

[Tyh2001]

@JayMeDotDot

看了你昨天的 PR 效果很完美的实现了。

下面给你个语法层面的建议哈~

你的代码：

const dividerStyle: ComputedRef<string> = computed((): string => {
  const borderColor = prop.color ? `border-color: ${prop.color}` : ''
  const margin = prop.margin ? `margin: ${prop.margin} 0` : ''
  const borderStyle = prop.type ? `border-style: ${prop.type}` : ''
  return [borderColor, margin, borderStyle].join(';')
})

其实里看似密密麻麻很多的代码，核心就是设置了三个样式，并没有那么复杂。

改进思路：

• 你要知道，能使用 css 解决的问题，最好就要使用 css 来解决，css 解决起来的性能大多数都是比 js 要好的。所以我将 type 属性改为作用不同的类名方式而作用 css 样式来实现
• 在计算属性中，完全可以返回一个对象即可实现效果

const dividerStyle = computed(() => {
  const { color, margin } = prop

  return {
    margin: `${margin || '30px'} 0`,
    borderColor: color,
  }
})

这样的既用了最少的代码，还实现了相同的效果，相比于你的减少了大量的计算量。

最后一点是关于计算属性，像这种分割线组件，其实动态性并不高，基本上用户在改了第一次样式之后，后面就不会再动了，所以直接将样式对象写在行内即可，除非动态性很高的样式或者类名，可以使用计算属性的缓存，这个也需要自己权衡一下~

可以看下我修改的