49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
|
import { ref, toRef, watch } from 'vue'
|
||
|
|
import { useComponentColor } from '../../../../hooks'
|
||
|
|
|
||
|
|
import type { ProgressBaseProps } from '../../common-props/progress'
|
||
|
|
|
||
|
|
interface ProgressPropsType extends ProgressBaseProps {
|
||
|
|
[key: string]: any
|
||
|
|
}
|
||
|
|
|
||
|
|
export const useProgressProps = (props: ProgressPropsType) => {
|
||
|
|
const [activeColorClass, activeColorStyle] = useComponentColor(
|
||
|
|
toRef(props, 'activeColor'),
|
||
|
|
'bg'
|
||
|
|
)
|
||
|
|
const [inactiveColorClass, inactiveColorStyle] = useComponentColor(
|
||
|
|
toRef(props, 'inactiveColor'),
|
||
|
|
'bg'
|
||
|
|
)
|
||
|
|
|
||
|
|
// 当前的进度百分比
|
||
|
|
const percent = ref(0)
|
||
|
|
let firstInitPercent = true
|
||
|
|
// 为了有动画效果，需要在下一次渲染时再设置进度条的长度
|
||
|
|
watch(
|
||
|
|
() => props.percent,
|
||
|
|
(val) => {
|
||
|
|
if (!firstInitPercent) {
|
||
|
|
percent.value = val
|
||
|
|
} else {
|
||
|
|
setTimeout(() => {
|
||
|
|
percent.value = val
|
||
|
|
firstInitPercent = false
|
||
|
|
}, 50)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
immediate: true,
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
return {
|
||
|
|
percent,
|
||
|
|
activeColorClass,
|
||
|
|
activeColorStyle,
|
||
|
|
inactiveColorClass,
|
||
|
|
inactiveColorStyle,
|
||
|
|
}
|
||
|
|
}
|