90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import { computed, toRef } from 'vue'
|
|
import {
|
|
useComponentColor,
|
|
useComponentSize,
|
|
useNamespace,
|
|
} from '../../../../hooks'
|
|
import { formatDomSizeValue } from '../../../../utils'
|
|
|
|
import type { CSSProperties } from 'vue'
|
|
import type { LoadingProps } from '../loading'
|
|
|
|
export const useLoadingCustomStyle = (props: LoadingProps) => {
|
|
const ns = useNamespace('loading')
|
|
|
|
// 解析颜色
|
|
const [colorClass, colorStyle, updateColor] = useComponentColor(
|
|
toRef(props, 'color'),
|
|
'bg'
|
|
)
|
|
|
|
// 解析尺寸
|
|
const { sizeType } = useComponentSize(props.size)
|
|
|
|
// 加载动画所属类
|
|
const loadingClass = computed<string>(() => {
|
|
const cls: string[] = []
|
|
cls.push(ns.b())
|
|
|
|
// 设置尺寸
|
|
if (props.size && sizeType.value === 'inner')
|
|
cls.push(ns.m(props.size as string))
|
|
|
|
return cls.join(' ')
|
|
})
|
|
// 加载动画所属样式
|
|
const loadingStyle = computed<CSSProperties>(() => {
|
|
const style: CSSProperties = {}
|
|
|
|
// 设置尺寸
|
|
if (props.size && sizeType.value === 'custom')
|
|
style.width = style.height = formatDomSizeValue(props.size)
|
|
|
|
return style
|
|
})
|
|
|
|
// 加载内容所属类
|
|
const loadingContentClass = computed<string>(() => {
|
|
const cls: string[] = []
|
|
cls.push(ns.b())
|
|
|
|
// 是否开启动画
|
|
if (props.animation) cls.push(ns.m('animation'))
|
|
return cls.join(' ')
|
|
})
|
|
// 加载内容所属样式
|
|
const loadingContentStyle = computed<CSSProperties>(() => {
|
|
const style: CSSProperties = {}
|
|
|
|
// 加载颜色类型
|
|
if (props.type) style['--loading-color'] = `var(--tn-color-${props.type})`
|
|
|
|
// 加载内容颜色
|
|
if (props.color && colorClass.value) {
|
|
const color = props.color.replace('tn-', '')
|
|
style['--loading-color'] = `var(--tn-color-${color})`
|
|
}
|
|
|
|
// 加载内容颜色
|
|
if (colorStyle.value) style['--loading-color'] = colorStyle.value
|
|
|
|
// 设置动画执行时间
|
|
if (props.duration) style.animationDuration = `${props.duration}s`
|
|
|
|
// 设置动画执行时间函数
|
|
if (props.mode === 'circle' || props.mode === 'semicircle') {
|
|
if (props.timeFunction) style.animationTimingFunction = props.timeFunction
|
|
}
|
|
return style
|
|
})
|
|
|
|
return {
|
|
ns,
|
|
loadingClass,
|
|
loadingStyle,
|
|
loadingContentClass,
|
|
loadingContentStyle,
|
|
updateColor,
|
|
}
|
|
}
|