106 lines
2.8 KiB
TypeScript
106 lines
2.8 KiB
TypeScript
import { computed, toRef } from 'vue'
|
|
import {
|
|
useComponentColor,
|
|
useComponentSize,
|
|
useNamespace,
|
|
} from '../../../../hooks'
|
|
import { formatDomSizeValue, isEmpty } from '../../../../utils'
|
|
import { useBadge } from './use-badge'
|
|
|
|
import type { CSSProperties } from 'vue'
|
|
import type { BadgeProps } from '../badge'
|
|
|
|
export const useBadgeCustomStyle = (props: BadgeProps) => {
|
|
const ns = useNamespace('badge')
|
|
const contentNs = useNamespace('badge-content')
|
|
|
|
const { contentType } = useBadge(props)
|
|
|
|
// 解析背景颜色
|
|
const [bgColorClass, bgColorStyle] = useComponentColor(
|
|
toRef(props, 'bgColor'),
|
|
'bg'
|
|
)
|
|
// 解析文字颜色
|
|
const [textColorClass, textColorStyle] = useComponentColor(
|
|
toRef(props, 'textColor'),
|
|
'text'
|
|
)
|
|
// 解析尺寸大小
|
|
const { sizeType } = useComponentSize(props.size)
|
|
|
|
// 徽标内容对应的类
|
|
const badgeContentClass = computed<string>(() => {
|
|
const cls: string[] = []
|
|
cls.push(contentNs.b())
|
|
|
|
// 点徽标
|
|
if (props.dot) cls.push(contentNs.m('dot'))
|
|
// 图标徽标
|
|
if (contentType.value === 'icon') cls.push(contentNs.m('icon'))
|
|
|
|
// 绝对定位
|
|
if (props.absolute) {
|
|
cls.push(contentNs.e('absolute'))
|
|
if (props.absoluteCenter) cls.push(contentNs.em('absolute', 'center'))
|
|
}
|
|
|
|
// 设置类型颜色
|
|
if (props.type) cls.push(`tn-type-${props.type}_bg`)
|
|
|
|
// 背景颜色
|
|
if (bgColorClass.value) cls.push(bgColorClass.value)
|
|
|
|
// 字体颜色
|
|
if (textColorClass.value) cls.push(textColorClass.value)
|
|
|
|
// 尺寸大小
|
|
if (props.size && sizeType.value === 'inner')
|
|
cls.push(contentNs.m(props.size as string))
|
|
|
|
// 加粗字体
|
|
if (props.bold) cls.push('tn-text-bold')
|
|
|
|
if (props.customClass) cls.push(props.customClass)
|
|
return cls.join(' ')
|
|
})
|
|
|
|
// 徽标对应的样式
|
|
const badgeContentStyle = computed<CSSProperties>(() => {
|
|
const style: CSSProperties = {}
|
|
|
|
// 背景颜色
|
|
if (bgColorStyle.value) style.backgroundColor = bgColorStyle.value
|
|
|
|
// 字体颜色
|
|
if (textColorStyle.value) style.color = textColorStyle.value
|
|
|
|
// 尺寸大小
|
|
if (
|
|
props.size &&
|
|
(sizeType.value === 'custom' || contentType.value === 'icon')
|
|
)
|
|
style.width = style.height = formatDomSizeValue(props.size)
|
|
|
|
// 字体尺寸
|
|
if (props.fontSize) style.fontSize = formatDomSizeValue(props.fontSize)
|
|
|
|
// 绝对定位是徽标偏移量
|
|
if (props.absolutePosition.top)
|
|
style.top = formatDomSizeValue(props.absolutePosition.top)
|
|
if (props.absolutePosition.right)
|
|
style.right = formatDomSizeValue(props.absolutePosition.right)
|
|
if (!isEmpty(props.customStyle)) {
|
|
Object.assign(style, props.customStyle)
|
|
}
|
|
return style
|
|
})
|
|
|
|
return {
|
|
ns,
|
|
contentNs,
|
|
badgeContentClass,
|
|
badgeContentStyle,
|
|
}
|
|
}
|