vue3里监听window事件(放大缩小devicePixelRatio)或者document事件(窗口宽高变化documentElement.clientWidth)
监听事件
·
监听放大缩小事件 window.devicePixelRatio
let backup
onMounted(() => {
window.onresize = async () => {
const devicePixelRatio = window.devicePixelRatio
/**
* 若工程是最后一页或是只有第一页就不进行加载
* 且 第一次加载缩小备份devicePixelRatio是未定义 或者 备份devicePixelRatio大于当前devicePixelRatio值 则刷新
**/
if ((ifLast.value === 0) && devicePixelRatio < 1 && ((backup === undefined) || (backup !== undefined && backup > devicePixelRatio))) {
backup = window.devicePixelRatio
if (selectedGroupKeys.value[0] === 0) {
await requestProjectList()
}
else {
await requestProjectListById()
}
}
}
})
onUnmounted(() => {
// 组件销毁后解绑事件
window.onresize = null
})
监听窗口高度是否改变事件
const changeJustifyContent = () => {
const browseContentWidth = parseInt(currentSlide.value.width) * scale.value
const documentWidth = document.documentElement.clientWidth
if (browseContentWidth >= documentWidth) {
justifyContent.value = 'flex-start'
}
else {
justifyContent.value = 'center'
}
}
onMounted(() => {
window.onresize = () => {
console.log('change')
changeJustifyContent()
}
})
onUnmounted(() => {
// 组件销毁后解绑事件
window.onresize = null
})
更多推荐
已为社区贡献1条内容
所有评论(0)