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.
43 lines
1.0 KiB
43 lines
1.0 KiB
2 years ago
|
import { ref, computed, 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 }
|
||
|
|
)
|
||
|
|
|
||
|
|
async function setPageHeight(height: number) {
|
||
|
|
pageHeight.value = height
|
||
|
|
}
|
||
|
|
|
||
|
|
createPageContext({
|
||
|
|
contentHeight: getViewHeight,
|
||
|
|
setPageHeight,
|
||
|
|
pageHeight
|
||
|
|
})
|
||
|
|
}
|