vue element container布局

mian.js
要导入全局css样式global.css

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'import './assets/css/global.css'/* 导入全局样式 */Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

global.css
将高度设置为100%才能撑满整个页面

html,
body,
#app{height: 100%;margin: 0;padding: 0;
}

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home'Vue.use(VueRouter)const routes = [{ path: '/', name: 'Home', component: Home }
]const router = new VueRouter({routes
})export default router

homt.vue

<template><el-container class="home-container"><el-header>Header</el-header><el-container><el-aside>Aside</el-aside><el-main>Main</el-main></el-container></el-container>
</template><script>
export default {name: 'Home'
}
</script><style scoped>.home-container{/*因为有两个相同的标签,所以要自定义标签*/height: 100%}.el-header{/*可以直接使用elementui的标签作为css选择器*/background-color: #373d41;display: flex;justify-content: space-between;padding-left: 0;align-items: center;color: #fff;font-size:20px;}.el-aside{background-color: #333744;}.el-main{background-color: #eaedf1;}
</style>

vue element container布局相关推荐

vue element container 子路由
在maincontainer中添加子模块 1.index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home ...
element布局容器大小_让Element-ui的Container布局容器高度百分百显示
使用Element(2.13.1版本)的Container布局容器布局,按照官网的代码运行后不能撑开整个页面,只能显示一段高度,代码如下: Header left Main 那如何让它高度百分百显示呢 ...
element的container布局铺满
element的container布局默认不铺满全屏,需要添加样式. <template><el-container><el-header>Header</e ...
html全局布局 vue_基于Vue+Element的电商后台管理系统
前言 mall项目后台管理系统的前端项目. 项目介绍 mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现. 主要包括商品管理.订单管理.会员管理.促销管理.运 ...
Element的Container布局容器布满全屏
摘要:在使用Element(2.10.1版本)的Container布局容器布,发现按照官网的代码运行后,发现不能撑开整个页面,只能显示一段高度官方代码运行后效果: 如何实现不满全屏呢?实现如下: ...
element ui 使用container布局时，容器布满全屏
element ui 使用container布局时,容器布满全屏在使用element ui 布局时,容器一直不能不满全局.在网上搜索了下.解决方法如下: 将包裹container的容器加入一下样式: ...
element ui 图片控件排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统开源项目推荐 1.什么是ElementUI 官网:https://el ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
使用container的嵌套_ElementUI 技术揭秘（4）— Container 布局容器组件的设计与实现。...
前言上一篇文章我们分析了 Layout 布局组件的设计和实现,它的应用场景通常是局部布局.对于整个页面的布局,element-ui 提供了 Container 布局容器组件,专门用于 PC 管理后台 ...

vue element container布局

vue element container布局相关推荐

最新文章

热门文章