vue3设置窗口缩小到一定程度时组件折叠

最新推荐文章于 2025-02-11 17:04:16 发布

嗷呜~小脑斧

最新推荐文章于 2025-02-11 17:04:16 发布

阅读量275

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_46939404/article/details/140183820

版权

给组件加一个v-if="!isCollapsed"

//左侧面板 
<left-panel v-if="!isCollapsed"></left-panel>
//右侧面板 
<right-panel v-if="!isCollapsed"></right-panel>

<script setup>
import { ref, onMounted, onUnmounted,provide } from 'vue'

const isCollapsed = ref(false);
 
function toggleCollapse() {
  isCollapsed.value = !isCollapsed.value;
}
 
function handleResize() {
  if (window.innerWidth < 1120 || window.innerHeight < 800 ) {
    isCollapsed.value = true;
  } else {
    isCollapsed.value = false;
  }
}

onMounted(() => {
  handleResize(); // 初始检查
  window.addEventListener('resize', handleResize);
});
 
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

我设置的是窗口宽度小于1120px或窗口高度小于800px的时候，两侧面板折叠

window.innerWidth < 1120 || window.innerHeight < 800