需求：实现侧边栏随屏幕大小变化进行收缩和扩展

部分代码可供参考

import menus from "./menus.js"
import drop from "../../assets/images/drop.png"
import { ref, onMounted, toRef, reactive } from "vue"

const handleOpen = (key, keyPath) => {}
const handleClose = (key, keyPath) => {}
const isCollapse = ref(false)
//获取屏幕宽度
const screenWidth = ref(window.innerWidth)
const handleResize = () => {
  screenWidth.value = window.innerWidth
}



onMounted(() => {
  window.addEventListener("resize", handleResize)
})
//watch监听屏幕宽度的变化，进行侧边栏的收缩和展开

watch(screenWidth, (newValue, oldValue) => {
  if (newValue < 992) {
    isCollapse.value = true
  } else {
    isCollapse.value = false
  }
  // console.log("值发生了变更", newValue, oldValue, isCollapse.value)
})