一个页面 resize 大小改变的正确使用

前提

• 使用库是 vueuse
• 使用到 useWindowSize 和 useEventListener

问题

当获取页面大小的时候使用下面代码

const { width, height } = useWindowSize()

但是这个函数是一次性的, 缩放页面不会改变值

解决

需要一个监听去实时调用函数

useEventListener(window, 'resize', (evt) => {
  changeSize(width.value)
})

当页面改变大小, changeSize 函数就能不断被调用

其他, changeSize 函数细节

这个函数有两层, 第一层是外部的例如 width 大小判断, 第二层是值设置判断

const changeSize = (width: any) => {
  if (width < 992) {
    if (is_open.value != 'sidebar_close') {
         is_open.value = 'sidebar_close'
    }
  }
 }

end

• 还是需要灵活使用