【玩玩Vue】使用elementui页面布局和控制页面的滚动

<template>
  <el-container class="layout-container">
    <el-header>Header Content</el-header>
    <el-main>
      <el-scrollbar style="height: 100%;">
        <!-- 主体内容 -->
        Main Content
      </el-scrollbar>
    </el-main>
    <el-footer>Footer Content</el-footer>
  </el-container>
</template>
 
<script>
export default {
  name: 'LayoutExample',
  // 其他组件选项...
};
</script>
 
<style scoped>
.layout-container {
  height: 100vh; /* 视窗高度 */
}
</style>

这个简单的Vue组件使用了Element UI的<el-container>、<el-header>、<el-main>和<el-footer>组件来创建一个带有头部、底部的页面布局，并且在主体内容区域使用了<el-scrollbar>组件来提供滚动功能。这个例子展示了如何结合Element UI库来快速搭建一个具有布局和滚动功能的页面。