50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import { computed, ref } from 'vue'
|
|
import { useComponentColor } from '../../../../hooks'
|
|
import { isEmptyDoubleVariableInDefault } from '../../../../utils'
|
|
|
|
import type { SetupContext } from 'vue'
|
|
import type { FooterEmits, FooterProps } from '../footer'
|
|
import type { FooterNavigatorData, FooterNavigatorItem } from '../types'
|
|
|
|
export const useFooter = (
|
|
props: FooterProps,
|
|
emits: SetupContext<FooterEmits>['emit']
|
|
) => {
|
|
// 导航数据
|
|
const navigatorData = computed<FooterNavigatorData>(() => {
|
|
return props.navigator.map((nav) => {
|
|
const textColor = ref(
|
|
isEmptyDoubleVariableInDefault(nav.textColor, props.navigatorTextColor)
|
|
)
|
|
const [textColorClass, textColorStyle] = useComponentColor(
|
|
textColor,
|
|
'text'
|
|
)
|
|
return {
|
|
title: nav.title || '',
|
|
url: nav?.url || '',
|
|
color: {
|
|
class: textColorClass.value,
|
|
style: textColorStyle.value,
|
|
},
|
|
}
|
|
})
|
|
})
|
|
|
|
// 页脚点击事件
|
|
const footerClickEvent = () => {
|
|
emits('click')
|
|
}
|
|
|
|
// 页脚导航点击事件
|
|
const navigatorClickEvent = (item: FooterNavigatorItem) => {
|
|
emits('navigatorClick', item)
|
|
}
|
|
|
|
return {
|
|
navigatorData,
|
|
footerClickEvent,
|
|
navigatorClickEvent,
|
|
}
|
|
}
|