122 lines
3.5 KiB
TypeScript
122 lines
3.5 KiB
TypeScript
import { computed, toRef } from 'vue'
|
|
import { useComponentColor, useNamespace } from '../../../../hooks'
|
|
import { formatDomSizeValue } from '../../../../utils'
|
|
|
|
import type { CSSProperties } from 'vue'
|
|
import type { PopupProps } from '../popup'
|
|
|
|
export const usePopupCustomStyle = (props: PopupProps) => {
|
|
const ns = useNamespace('popup')
|
|
|
|
// 当前模态框的zIndex
|
|
const zIndex = computed(() => Number(props.zIndex))
|
|
|
|
// 遮罩层的zIndex
|
|
const overlayZIndex = computed(() => zIndex.value - 1)
|
|
|
|
// 内容背景颜色
|
|
const [contentBgColorClass, contentBgColorStyle] = useComponentColor(
|
|
toRef(props, 'bgColor'),
|
|
'bg'
|
|
)
|
|
|
|
// 内容所属类
|
|
const popupContentClass = computed<string>(() => {
|
|
const cls: string[] = [ns.e('content')]
|
|
|
|
// 内容弹出位置
|
|
if (props.openDirection) cls.push(ns.em('content', props.openDirection))
|
|
|
|
// 如果是底部弹出，是否开启安全区域
|
|
if (props.openDirection === 'bottom' && props.safeAreaInsetBottom) {
|
|
cls.push('tn-u-safe-area')
|
|
}
|
|
|
|
// 内容背景颜色
|
|
if (contentBgColorClass.value) cls.push(contentBgColorClass.value)
|
|
|
|
return cls.join(' ')
|
|
})
|
|
|
|
// 内容所属样式
|
|
const popupContentStyle = computed<CSSProperties>(() => {
|
|
const style: CSSProperties = {}
|
|
|
|
// 设置背景颜色
|
|
if (contentBgColorStyle.value)
|
|
style.backgroundColor = contentBgColorStyle.value
|
|
|
|
// 设置圆角
|
|
if (props.radius) {
|
|
// 如果有设置圆角则条件overflow:hidden
|
|
style.overflow = 'hidden'
|
|
// 根据不同的弹出位置设置圆角
|
|
if (props.openDirection === 'center') {
|
|
style.borderRadius = formatDomSizeValue(props.radius)
|
|
}
|
|
if (props.openDirection === 'top') {
|
|
style.borderBottomLeftRadius = formatDomSizeValue(props.radius)
|
|
style.borderBottomRightRadius = formatDomSizeValue(props.radius)
|
|
}
|
|
if (props.openDirection === 'left') {
|
|
style.borderTopRightRadius = formatDomSizeValue(props.radius)
|
|
style.borderBottomRightRadius = formatDomSizeValue(props.radius)
|
|
}
|
|
if (props.openDirection === 'right') {
|
|
style.borderTopLeftRadius = formatDomSizeValue(props.radius)
|
|
style.borderBottomLeftRadius = formatDomSizeValue(props.radius)
|
|
}
|
|
if (props.openDirection === 'bottom') {
|
|
style.borderTopLeftRadius = formatDomSizeValue(props.radius)
|
|
style.borderTopRightRadius = formatDomSizeValue(props.radius)
|
|
}
|
|
}
|
|
|
|
// 设置距离顶部的距离
|
|
if (
|
|
props.top &&
|
|
(props.openDirection === 'top' ||
|
|
props.openDirection === 'left' ||
|
|
props.openDirection === 'right')
|
|
) {
|
|
style.top = formatDomSizeValue(props.top, 'px')
|
|
}
|
|
|
|
// 根据不同的位置设置不同的宽度或高度
|
|
if (
|
|
props.width &&
|
|
(props.openDirection === 'left' ||
|
|
props.openDirection === 'right' ||
|
|
props.openDirection === 'center')
|
|
) {
|
|
style.width = formatDomSizeValue(props.width)
|
|
}
|
|
if (
|
|
props.height &&
|
|
(props.openDirection === 'top' ||
|
|
props.openDirection === 'bottom' ||
|
|
props.openDirection === 'center')
|
|
) {
|
|
style.height = formatDomSizeValue(props.height)
|
|
}
|
|
|
|
if (props.openDirection === 'left' || props.openDirection === 'right') {
|
|
if (props.top)
|
|
style.height = `calc(100% - ${formatDomSizeValue(props.top, 'px')})`
|
|
}
|
|
|
|
// 设置zIndex
|
|
style.zIndex = zIndex.value
|
|
|
|
return style
|
|
})
|
|
|
|
return {
|
|
ns,
|
|
zIndex,
|
|
overlayZIndex,
|
|
popupContentClass,
|
|
popupContentStyle,
|
|
}
|
|
}
|