服务周到的做网站,在linux上做网站搭建,推广软文发稿,深圳市九号公告最新消息整体布局整体布局 你可能会去敲不同的项目#xff0c;有很多种平台。那么其实都是可以复用的。唯一不同的就是main里面的内容是不同的#xff0c;边框架子都是相同的。其实框架是不怎么变化的#xff0c;变化的是main里面。 src/layout/Layout.vue 这里需要新增一个页面Lay… 整体布局整体布局 你可能会去敲不同的项目有很多种平台。那么其实都是可以复用的。唯一不同的就是main里面的内容是不同的边框架子都是相同的。其实框架是不怎么变化的变化的是main里面。 src/layout/Layout.vue 这里需要新增一个页面Layout.vue, const routes [{path: /test,component: () import(/views/test/Test.vue),meta: {title: 测试页}},{path: /login,component: () import(/views/login/Login.vue),meta: {title: 测试页}},{path: /layout,//layout是公用的所有的都使用这个整体布局component: () import(/layout/Layout.vue),meta: {title: 整体布局}},
] 布局容器 [el-container] Container 布局容器 | Element Plus
el-container它是用来做整体布局的用于布局的容器组件方便快速搭建页面的基本结构 。 常用标签 其实和el-form类似一个组件其实是由很多的标签组成的。和原生的html类似比如select里面有很多option。 templatedivel-containerel-aside width200pxAside/el-asideel-containerel-headerHeader/el-headerel-mainMain/el-mainel-footerFooter/el-footer/el-container/el-container/div
/template 修改一下整体的栏位置就变得非常清楚了。如果去掉第二个el-container那么就全部变为了水平排列。第二个container里面header main footer里面是垂直排列的这些在container里面垂直排列但是aside和这些又是水平排列 templatedivel-container styleheight:100vh;width:100vw!--侧边栏需要定义宽度--el-aside classaside width220px stylebackground-color:coralAside/el-asideel-container!--垂直排列就需要在container里面外层加一个container--el-header stylebackground-color:greenHeader/el-headerel-main stylebackground-color:royalblueMain/el-mainel-footer stylebackground-color:yellowFooter/el-footer/el-container/el-container/div
/template element-plus已经帮我们提供了整体布局的架子后面只需要在main里面改东西就行了。 标题-固钉 [el-affix] Affix 固钉 | Element Plus 它会固定在浏览器的某个位置将页面元素固定在特定可视区域。 在测边栏最上方有平台名称滚轴混动的时候可能平台名字就没有了。如果将平台名设置为固钉它会盖在侧边栏上面往上滚动的时候会一直存在。 侧边栏是一个区域封装了一个div 。 常用属性
