118 lines
3.0 KiB
TypeScript
118 lines
3.0 KiB
TypeScript
import { computed, toRef, watch } from 'vue'
|
|
import {
|
|
useComponentColor,
|
|
useComponentSize,
|
|
useNamespace,
|
|
} from '../../../../hooks'
|
|
import { formatDomSizeValue } from '../../../../utils'
|
|
|
|
import type { CSSProperties, Ref } from 'vue'
|
|
import type { SubsectionProps } from '../subsection'
|
|
import type { SubsectionSliderRect } from '../types'
|
|
|
|
export const useSubsectionCustomStyle = (
|
|
props: SubsectionProps,
|
|
activeColor: Ref<string>,
|
|
sliderRectInfo: Ref<SubsectionSliderRect>
|
|
) => {
|
|
const ns = useNamespace('subsection')
|
|
|
|
// 解析颜色
|
|
const [activeBgColorClass, activeBgColorStyle, updateActiveBgColor] =
|
|
useComponentColor(activeColor, 'bg')
|
|
const [activeBorderColorClass, activeBorderColorStyle] = useComponentColor(
|
|
toRef(props, 'activeColor'),
|
|
'border'
|
|
)
|
|
watch(
|
|
() => activeColor.value,
|
|
(val) => {
|
|
updateActiveBgColor(val)
|
|
}
|
|
)
|
|
|
|
// 解析尺寸
|
|
const { sizeType } = useComponentSize(props.size)
|
|
|
|
// 分段器的类
|
|
const subsectionClass = computed<string>(() => {
|
|
const cls: string[] = [ns.b(), ns.m(props.mode)]
|
|
|
|
// 设置尺寸
|
|
if (props.size && sizeType.value === 'inner') cls.push(ns.m(props.size))
|
|
|
|
// 如果是默认模式，设置激活颜色的边框
|
|
if (props.mode === 'default') {
|
|
if (activeBorderColorClass.value) cls.push(activeBorderColorClass.value)
|
|
}
|
|
|
|
return cls.join(' ')
|
|
})
|
|
// 分段器的样式
|
|
const subsectionStyle = computed<CSSProperties>(() => {
|
|
const style: CSSProperties = {}
|
|
|
|
// 如果是按钮模式，则设置背景颜色
|
|
if (props.mode === 'button') {
|
|
style.backgroundColor = 'var(--tn-color-gray-light)'
|
|
}
|
|
|
|
// 如果是默认模式，设置激活颜色的边框
|
|
if (props.mode === 'default') {
|
|
if (!activeBorderColorClass.value)
|
|
style.borderColor =
|
|
activeBorderColorStyle.value || 'var(--tn-color-primary)'
|
|
}
|
|
|
|
// 设置尺寸
|
|
if (props.size && sizeType.value === 'custom')
|
|
style.fontSize = formatDomSizeValue(props.size)
|
|
|
|
// 设置圆角
|
|
if (props.radius) {
|
|
style.borderRadius = formatDomSizeValue(props.radius)
|
|
}
|
|
|
|
return style
|
|
})
|
|
|
|
// 滑块的类
|
|
const subsectionSliderClass = computed<string>(() => {
|
|
const cls: string[] = [ns.e('slider'), props.mode]
|
|
|
|
if (props.mode === 'default') {
|
|
if (activeBgColorClass.value) cls.push(activeBgColorClass.value)
|
|
}
|
|
|
|
return cls.join(' ')
|
|
})
|
|
// 滑块的样式
|
|
const subsectionSliderStyle = computed<CSSProperties>(() => {
|
|
const style: CSSProperties = {}
|
|
|
|
if (props.mode === 'default') {
|
|
if (!activeBgColorClass.value)
|
|
style.backgroundColor =
|
|
activeBgColorStyle.value || 'var(--tn-color-primary)'
|
|
} else {
|
|
style.backgroundColor = 'var(--tn-color-white)'
|
|
}
|
|
|
|
// 滑动的位置
|
|
if (sliderRectInfo.value) {
|
|
style.left = `${sliderRectInfo.value.left}px`
|
|
style.width = `${sliderRectInfo.value.width}px`
|
|
}
|
|
|
|
return style
|
|
})
|
|
|
|
return {
|
|
ns,
|
|
subsectionClass,
|
|
subsectionStyle,
|
|
subsectionSliderClass,
|
|
subsectionSliderStyle,
|
|
}
|
|
}
|