elementUI侧边栏实现响应式,响应式侧边栏
在Element UI中,可以使用<el-aside>
组件来创建侧边栏,并通过响应式布局的特性来实现在不同屏幕尺寸下的显示效果。
以下是一个简单的例子,展示如何使用Element UI的响应式布局特性来实现响应式侧边栏:
<template>
<el-container class="responsive-container">
<!-- 侧边栏 -->
<el-aside width="auto" :class="{'hidden-xs-only': !isCollapse}">
<el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-menu-item index="1">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</el-menu-item>
<!-- 更多菜单项 -->
</el-menu>
</el-aside>
<!-- 主要内容区 -->
<el-main>
<!-- 这里是主要内容 -->
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
isCollapse: false
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
};
</script>
<style>
.responsive-container {
/* 响应式布局 */
margin-left: 200px;
padding: 0 20px;
}
.el-aside {
background-color: #304156;
transition: width 0.3s;
}
.el-main {
background-color: #e9eef3;
color: #333;
}
.hidden-xs-only {
width: 64px !important; /* 收缩后的宽度 */
}
/* 媒体查询实现响应式 */
@media (max-width: 768px) {
.responsive-container {
margin-left: 0;
}
.hidden-xs-only {
width: auto !important; /* 屏幕尺寸小于768px时展开侧边栏 */
}
}
</style>
在这个例子中,侧边栏默认是展开的,当屏幕宽度小于768像素时,通过媒体查询,.hidden-xs-only
类中的样式会覆盖 .el-aside
的样式,使得侧边栏自动隐藏并通过按钮展开(如果Element UI的<el-menu>
组件支持这种行为的话)。这样就实现了侧边栏的响应式布局。
评论已关闭