37 lines
873 B
TypeScript
37 lines
873 B
TypeScript
|
import { ref } from 'vue'
|
|||
|
|
|
|||
|
|
export const useViewSize = () => {
|
|||
|
|
|
|||
|
|
const popupBaseView = ref(null)
|
|||
|
|
const viewWidth = ref("0")
|
|||
|
|
const viewHeight = ref("0")
|
|||
|
|
const unit = 'px'
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 更新宽和高的数据
|
|||
|
|
*/
|
|||
|
|
const updateDimensions = () => {
|
|||
|
|
if (popupBaseView.value) {
|
|||
|
|
viewWidth.value = popupBaseView.value.offsetWidth + unit
|
|||
|
|
viewHeight.value = popupBaseView.value.offsetHeight + unit
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 组件挂载完毕，计算宽高，并且给浏览器添加监听器，监听窗口大小改变
|
|||
|
|
*/
|
|||
|
|
onMounted(() => {
|
|||
|
|
updateDimensions()
|
|||
|
|
window.addEventListener('resize', updateDimensions)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 组件视图更新完毕，计算宽高
|
|||
|
|
*/
|
|||
|
|
onUpdated(() => {
|
|||
|
|
updateDimensions()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return { popupBaseView, viewWidth, viewHeight }
|
|||
|
|
|
|||
|
|
}
|