Vue + Element Plus 简单的响应式侧边栏
利用onMounted，初次加载页面的时候，为页面注册一个监听器。 当 ‘resize’ 事件发生时， 触发函数。 此函数里监听窗口大小，当窗口小于 500px 时，改变 isCollpase boolean 值。 实现动态变化。
<template><el-menudefault-active="2"class="el-menu-vertical-demo":collapse="isCollapse"@open="handleOpen"@close="handleClose"><el-menu-item index="1"><el-icon><Edit /></el-icon><template #title>创建问卷</template></el-menu-item><el-menu-item index="2"><el-icon><Document /></el-icon><template #title>全部问卷</template></el-menu-item><el-menu-item index="3"><el-icon><Delete /></el-icon><template #title>回收站</template></el-menu-item><el-menu-item index="4"><el-icon><DataAnalysis /></el-icon><template #title>数据统计</template></el-menu-item></el-menu>
</template><script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
import {Document,DataAnalysis,Edit ,Delete
} from '@element-plus/icons-vue'const isCollapse = ref(true)
const handleOpen = (key , keyPath) => {console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {console.log(key, keyPath)
}
// 动态计算宽度 当屏幕分辨率 =< 500px时候使用其他组件
const screenWidth = ref(window.innerWidth);
const handleResize = () => {screenWidth.value = window.innerWidth;isCollapse.value = screenWidth.value < 500;console.log(isCollapse.value);console.log(screenWidth.value);
};onMounted(() => {//动态计算宽，调用handleResize方法window.addEventListener('resize', handleResize);
});// 看网上说,避免内存泄漏
onUnmounted(()=>{window.removeEventListener('resize',handleResize);
})</script><style>
.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;
}
</style>
点击侧边栏，主体区域跟着切换组件
看到网上有好几种实现方式，只用了最简单的一个。
利用 router-view
参考博客
<el-menu router > <el-menu-item index="/vote/all"><el-icon><Document /></el-icon><template #title>全部问卷</template></el-menu-item><el-menu-item index="/vote/trash"><el-icon><Delete /></el-icon><template #title>回收站</template></el-menu-item><el-menu-item index="/vote/analyse"><el-icon><DataAnalysis /></el-icon><template #title>数据统计</template></el-menu-item>
</el-menu><router-view> < /router-view>
利用Vue 组件实现
代码来自Vue官网
Vue 官网参考
在线运行代码
<script>
import Home from './Home.vue'
import Posts from './Posts.vue'
import Archive from './Archive.vue'export default {components: {Home,Posts,Archive},data() {return {currentTab: 'Home',tabs: ['Home', 'Posts', 'Archive']}}
}
</script><template><div class="demo"><buttonv-for="tab in tabs":key="tab":class="['tab-button', { active: currentTab === tab }]"@click="currentTab = tab">{{ tab }}</button><component :is="currentTab" class="tab"></component></div>
</template><style>
.demo {font-family: sans-serif;border: 1px solid #eee;border-radius: 2px;padding: 20px 30px;margin-top: 1em;margin-bottom: 40px;user-select: none;overflow-x: auto;
}.tab-button {padding: 6px 10px;border-top-left-radius: 3px;border-top-right-radius: 3px;border: 1px solid #ccc;cursor: pointer;background: #f0f0f0;margin-bottom: -1px;margin-right: -1px;
}
.tab-button:hover {background: #e0e0e0;
}
.tab-button.active {background: #e0e0e0;
}
.tab {border: 1px solid #ccc;padding: 10px;
}
</style>
