关于 Progress 组件开发相关

[Tyh2001]

Progress 进度条

Attributes

• percentage 百分比
• type 类型
• square 方形的
• linear 线性的
• show-text 是否展示进度百分比
• color 自定义颜色
• background 背景色
• width 自定义宽度
• height 自定义高度

Event

• full 当到达满进度的回调

设计稿

https://www.figma.com/file/Z0iGT78cxmEiPsZhZN75C2/Progress-%E8%BF%9B%E5%BA%A6%E6%9D%A1?node-id=0%3A1

参考

可以通过下面进行参考设计组件

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input](https://github.com/FightingDesign/fighting-design/blob/master/start/src/Progress.vue)

[lzyaom]

type 是指设计稿中的状态吗？
是的话，感觉改成 status 会好一点

[Tyh2001]

这个就是展示不同的类型，就像按钮组件一样，统一都是使用 type 的

[lzyaom]

好的

[lzyaom]

插槽

• default -- 用于自定义展示内容 ，参数为 { percentage }

[ding139725]

有个小建议就是现有的type改为status 然后线形、方形、等用type进行控制，否则线形和方形都可以进行设置，会不会出现不可控制的情况

[Tyh2001]

因为之前所有组件都使用了 type 进行实现不同的样式。

线性和方形的话，使用 state 实现是合理的，也可以实现，但是大多数组件其实我是想避免通过字符串来实现，因为字符串是不可控的，如果传入字符串是不合法的，就会产生不可预期的效果，布尔类型相对应更好控制，我的理解哈～

[Tyh2001]

#68 一些小问题

• props 默认值的返回值类型应该是小写的，ts 大多数类型都是小写的写法

// 不合法的
const Props = {
  type: {
    type: String,
    default: (): String => 'primary',
  },
}

// 合法的
const Props = {
  type: {
    type: String,
    default: (): string => 'primary',
  },
}

• 可选参数需要加入校验

import type { PropType } from 'vue'

type buttonType = 'default' | 'primary' | 'success' | 'danger' | 'warning'

const Props = {
  type: {
    type: String as PropType<buttonType>,
    default: (): buttonType => 'default',
    validator: (val: buttonType): boolean => {
      return (
        ['default', 'primary', 'success', 'danger', 'warning'] as const
      ).includes(val)
    },
  },
}

其它没问题，很优秀

[ding139725]

respect

[Tyh2001]

另外在模板中就可以直接使用 prop 的任何属性了，不需要再 prop.xxx 了

[ding139725]

respect

[lzyaom]

百分比没有垂直居中，要修改一下样式

[Tyh2001]

ok

[Tyh2001]

测试一下哈~

还有个自定义高度的配置项

<f-progress type="primary" :percentage="50" :height="40" />
<f-progress type="success" :percentage="50" />

[lzyaom]

👌

[lzyaom]

height 在 [15, 18) 的时候，显示会有点问题
不然添加一个属性，控制是在右侧显示还是在内侧显示百分比？

[Tyh2001]

可以的 新增一个配置项吧
@lzyaom