You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
import { computed, ref, unref } from 'vue'
|
|
|
|
import { createPageContext } from '@/hooks/component/usePageContext'
|
|
|
|
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
|
|
|
|
|
|
|
|
const headerHeightRef = ref(0)
|
|
|
|
const footerHeightRef = ref(0)
|
|
|
|
|
|
|
|
export function useLayoutHeight() {
|
|
|
|
function setHeaderHeight(val) {
|
|
|
|
headerHeightRef.value = val
|
|
|
|
}
|
|
|
|
function setFooterHeight(val) {
|
|
|
|
footerHeightRef.value = val
|
|
|
|
}
|
|
|
|
return { headerHeightRef, footerHeightRef, setHeaderHeight, setFooterHeight }
|
|
|
|
}
|
|
|
|
|
|
|
|
export function useContentViewHeight() {
|
|
|
|
const contentHeight = ref(window.innerHeight)
|
|
|
|
const pageHeight = ref(window.innerHeight)
|
|
|
|
const getViewHeight = computed(() => {
|
|
|
|
return unref(contentHeight) - unref(headerHeightRef) - unref(footerHeightRef) || 0
|
|
|
|
})
|
|
|
|
|
|
|
|
useWindowSizeFn(
|
|
|
|
() => {
|
|
|
|
contentHeight.value = window.innerHeight
|
|
|
|
},
|
|
|
|
100,
|
|
|
|
{ immediate: true },
|
|
|
|
)
|
|
|
|
|
|
|
|
function setPageHeight(height: number) {
|
|
|
|
pageHeight.value = height
|
|
|
|
}
|
|
|
|
|
|
|
|
createPageContext({
|
|
|
|
contentHeight: getViewHeight,
|
|
|
|
setPageHeight,
|
|
|
|
pageHeight,
|
|
|
|
})
|
|
|
|
}
|