window 监听浏览器窗口变化

最新推荐文章于 2024-06-06 13:06:13 发布

代码改变生活-120

最新推荐文章于 2024-06-06 13:06:13 发布

阅读量406

点赞数 1

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/yjl13598765406/article/details/126986200

版权

前端专栏收录该内容

29 篇文章 2 订阅

订阅专栏

 /** 使用 window.onresize 监听浏览器变化 */
   window.onresize = () => {
     getHeaderRight()
   }
   const getHeaderRight = () => {
      nextTick(() => {
        /** 当前占用的宽度 */
        const headerCenter = document.getElementsByClassName('header-center')
        const hRightWidth = headerCenter && headerCenter[0] ? headerCenter[0].offsetWidth : null
        leftWidth.value = defaultLeftWidth.value
        rightWidth.value = defaultRightWidth.value
        if (hRightWidth > 1000) {
          showNum.value = defaultShowNum.value
        } else if (hRightWidth < 1000 && hRightWidth > 850) {
          showNum.value = 5
        } else if (hRightWidth < 1000 && hRightWidth > 800) {
          showNum.value = 4
          leftWidth.value = '35%'
          rightWidth.value = '65%'
        } else {
          showNum.value = 3
          leftWidth.value = '35%'
          rightWidth.value = '65%'
        }
        showServiceList.value = getPagingData(serviceList.value, showNum.value)
      })
    }