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
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3项目中,可以使用`window`对象来监听浏览器在全屏和小屏状态下的改变。 首先,需要在Vue组件的`mounted`生命周期钩子函数中添加全屏和退出全屏的事件监听器,代码如下: ``` mounted() { window.addEventListener('fullscreenchange', this.handleFullScreenChange) window.addEventListener('webkitfullscreenchange', this.handleFullScreenChange) // 其他浏览器的全屏事件监听,如mozfullscreenchange,msfullscreenchange等 window.addEventListener('resize', this.handleResize) }, ``` 全屏状态变化时会触发`fullscreenchange`或`webkitfullscreenchange`事件,需要编写相应的事件处理函数`handleFullScreenChange`来处理全屏变化时的逻辑。 接下来,需要添加分辨率变化时的事件监听器,`resize`事件会在浏览器窗口大小发生改变时触发。在Vue组件中,编写`handleResize`事件处理函数来处理窗口大小变化时的逻辑。 ``` methods: { handleFullScreenChange() { // 在这处理全屏状态变化时的逻辑 if (document.fullscreenElement || document.webkitFullscreenElement) { // 当前处于全屏状态 // ... } else { // 当前处于非全屏状态 // ... } }, handleResize() { // 在这处理窗口大小变化时的逻辑 const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; if (screenWidth > 1024) { // 大屏逻辑 // ... } else { // 小屏逻辑 // ... } } }, ``` 以上代码中,`handleFullScreenChange`函数根据`document.fullscreenElement`或`document.webkitFullscreenElement`是否为`null`来判断当前是否处于全屏状态。在其处理逻辑内,你可以根据需要自行编写全屏和非全屏状态时的操作。 `handleResize`函数通过获取窗口的宽度和高度来判断当前窗口是否为小屏(例如宽度小于1024),你可以根据需要在该函数的处理逻辑内编写相应的操作。 需要注意的是,当组件销毁时,也需要将之前添加的事件监听器移除,以避免内存泄漏,可以在Vue组件的`beforeUnmount`生命周期钩子函数中移除事件监听器,例如: ``` beforeUnmount() { window.removeEventListener('fullscreenchange', this.handleFullScreenChange) window.removeEventListener('webkitfullscreenchange', this.handleFullScreenChange) // 其他浏览器的全屏事件监听器的移除,如mozfullscreenchange,msfullscreenchange等 window.removeEventListener('resize', this.handleResize) }, ``` 以上是使用Vue3项目监听浏览器全屏和小屏的方法,可以根据实际需求来编写相应的处理逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值