会员
周边
众包
新闻
博问
闪存
赞助商
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
大话人生
博客园
::
首页
::
新随笔
::
联系
::
订阅
::
管理
公告
3-vue后台整体布局完善
3-vue后台整体布局完善
3-Vue后台整体布局完善
1.整体变成一个盒装的
2.在app.vue中要设置一个min-height为100vh
3.在home.vue中的改造
修改gloable.css为
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
*，表示对所有元素都生效
代码
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
#app{
min-height: 100vh;
}
</style>
说明
100vh，表示整个窗口高度为100vh
1.el-menu中设置min-height为100%
修改后
<el-menu :default-openeds="['1', '3']" style="min-height: 100%">
2.去掉最外城的div,让el-container直接为主层，在最外面
3.设置el-container的min-height为100vh，表示撑满
<el-container style="min-height: 100vh;">
app.vue就不设置高度为100vh了
app.vue变为
<template>
<div id="app">
<router-view/>
</div>
</template>
4.在el-menu中设置一个背景颜色
设置代码
设置后代码
background-color="rgb(48, 65, 86)"
<el-menu :default-openeds="['1', '3']" style="min-height: 100%"
background-color="rgb(48, 65, 86)"
>
5.在el-nemu中设置文字颜色为白色
设置代码
设置后代码
text-color="#fff"
<el-menu :default-openeds="['1', '3']" style="min-height: 100%"
background-color="rgb(48, 65, 86)"
text-color="#fff"
>
6.解决每一项中都有一个超出
解决方法
在el-neum的样式中添加一个overflow-x为hidder
添加代码
添加后
overflow-x: hidden
<el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
background-color="rgb(48, 65, 86)"
text-color="#fff"
>
7.加一个高亮的设置
添加代码
active-text-color="#ffd04b"
添加后代码
<el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
background-color="rgb(48, 65, 86)"
text-color="#fff"
active-text-color="#ffd04b"
>
8.关掉收缩的动画
添加代码
:collapse-transition="false"
添加后代码
<el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
background-color="rgb(48, 65, 86)"
text-color="#fff"
active-text-color="#ffd04b"
:collapse-transition="false"
>
9.添加一个收缩的按钮
在el-header下添加一个搜索的按钮
添加的收缩按钮的代码
<div style="flex:1; font-size: 18px">
<span :class="collapseBtnClass" style="cursor:pointer" @click="collapse"></
span>
</div>
在returnzho中设置搜索按钮的名称为‘el-icon-s-fold’
return{
tableData: Array(10).fill(item),
collapseBtnClass: 'el-icon-s-fold'
}
可以在element ui的官网中查看收缩按钮的名称
在官网组件（https://element.faas.ele.me/#/zh-CN/component/icon）icon图标中就有
el-icon-s-fold图标
3.定义函数collapse(动态绑定搜索和展开按钮)
methods:{
collapse(){ //点击搜索按钮触发
this.isCollapse= !this.isCollapse
if(this.isCollapse){
this.sideWidth = 64
this.collapseBtnClass = 'el-icon-s-unfold'
}else{
this.sideWidth = 200
this.collapseBtnClass = 'el-icon-s-fold'
}
}
}
4.元素中menu的展开和关闭都依赖collapse属性
需要在el-menu中添加collapse属性
添加代码
添加后的代码
:collapse="isCollapse"
<el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
background-color="rgb(48, 65, 86)"
text-color="#fff"
active-text-color="#ffd04b"
:collapse-transition="false"
:collapse="isCollapse"
>
isCollapse为true,表示展开，为false,表示关闭
5.将el-header变成flex布局
添加代码
添加后的代码
display: flex
return{
tableData: Array(10).fill(item),
collapseBtnClass: 'el-icon-s-fold',
isCollapse: false
}
<el-header style="text-align: right; font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex">
在其下左边设置flex:1
<div style="flex:1; font-size: 18px">
右边设置width为50px
<el-dropdown style="width: 50px">
设置el-header的text-align：right去掉，不让居右
<el-header style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex">
名字王小虎应该是靠近图标
<el-dropdown style="width: 50px">
<span>王小虎</span>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
名字后要加一个向下的图标
<el-dropdown style="width: 70px; cursor:pointer">
<span>王小虎</span>
<i class="el-icon-arrow-down" style="margin-right: 5px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
说明
<i class="el-icon-arrow-down"
加一个向下的图标
style="margin-right: 5px"
表示名字王小虎和向下的箭头中间隔5px
cursor:pointer
表示鼠标悬挂的时候为小手的形状
修改下拉内容为个人信息和退出
解决点击后问题：1.文字还在；2.宽度没变
解决宽度问题
将宽度变为一个变量通过函数控制
1.将宽度变为一个变量
修改前
<el-aside width="200px"
修改后
<el-aside :width="sideWidth + 'px'"
说明
冒号为绑定的意思
sideWidth为一个变量
2.return中增加sideWidth设置
return{
tableData: Array(10).fill(item),
collapseBtnClass: 'el-icon-s-fold',
isCollapse: false,
sideWidth: 200
}
3.方法中设置sideWidth
methods:{
collapse(){ //点击搜索按钮触发
this.isCollapse= !this.isCollapse
if(this.isCollapse){
this.sideWidth = 64
}
}
解决文字
如果为true，则设置sideWidth为64
导航一要加上span标签，样式要和NavMenu 导航菜单中的折叠的样式一致
代码变为
<template slot="title">
<i class="el-icon-message"></i>
<span slot="title">导航一</span>
</template>
导航一、二、三都要做相应的修改
<el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);
height: 100%; overflow: hidden">
<el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
background-color="rgb(48, 65, 86)"
text-color="#fff"
active-text-color="#ffd04b"
:collapse-transition="false"
:collapse="isCollapse"
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-message"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
说明
如果收起，宽度变小，图标变为缩的图标；如果展开，宽度变大，图标变为放开的图标
10.导航栏中加一个logo
在el-menu下，el-submenu上加一个div
高度和el-header的高度一致，
代码
<div style="heigth：60px; line-height: 60px; text-align: center">
<img src="../assets/logo.png" alt="" style="width: 20px; position:relative; top:
5px; margin-right: 5px">
<b style="color: white">后台管理系统</b>
</div>
高度60px,居中，有一个图片(宽20px),有一个后台管理系统的文字
收缩时文字要消失，因需要给文字层绑定一个变量来控制
代码
1.绑定一个v-show
<b style="color: white" v-show="logoTextShow">后台管理系统</b>
2.return中加这个变量的值
return{
tableData: Array(10).fill(item),
collapseBtnClass: 'el-icon-s-fold',
isCollapse: false,
sideWidth: 200,
logoTextShow:true
}
3.方法中改变值
methods:{
collapse(){ //点击搜索按钮触发
this.isCollapse= !this.isCollapse
if(this.isCollapse){//收缩
this.sideWidth = 64
this.collapseBtnClass = 'el-icon-s-unfold'
this.logoTextShow = false
}else{ //展开
this.sideWidth = 200
this.collapseBtnClass = 'el-icon-s-fold'
this.logoTextShow = true
}
}
}
11.line-height设置可以让文字居中
12.加一个阴影的效果
加的代码
加后的代码
box-shadow: 2px 0 6px rgb(0 21 41)
<el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246); box-
shadow: 2px 0 6px rgb(0 21 41); height: 100%; overflow: hidden">
13.home.vue的最终的代码
<template>
<el-container style="min-height: 100vh;">
<el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);
box-shadow: 2px 0 6px rgb(0 21 41); height: 100%; overflow: hidden">
<el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
background-color="rgb(48, 65, 86)"
text-color="#fff"
active-text-color="#ffd04b"
:collapse-transition="false"
:collapse="isCollapse"
>
<div style="heigth：60px; line-height: 60px; text-align: center">
<img src="../assets/logo.png" alt="" style="width: 20px; position:relative; top:
5px; margin-right: 5px">
<b style="color: white" v-show="logoTextShow">后台管理系统</b>
</div>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-message"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="font-size: 12px; border-bottom: 1px solid #ccc; line-height:
60px; display: flex">
<div style="flex:1; font-size: 20px">
<span :class="collapseBtnClass" style="cursor:pointer" @click="collapse"></
span>
</div>
<el-dropdown style="width: 70px; cursor:pointer">
<span>王小虎</span>
<i class="el-icon-arrow-down" style="margin-right: 5px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
data(){
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return{
tableData: Array(10).fill(item),
collapseBtnClass: 'el-icon-s-fold',
isCollapse: false,
sideWidth: 200,
logoTextShow:true
}
},
methods:{
collapse(){ //点击搜索按钮触发
this.isCollapse= !this.isCollapse
if(this.isCollapse){//收缩
this.sideWidth = 64
this.collapseBtnClass = 'el-icon-s-unfold'
this.logoTextShow = false
}else{ //展开
this.sideWidth = 200
this.collapseBtnClass = 'el-icon-s-fold'
this.logoTextShow = true
}
}
}
}
</script>
Created With
EdrawMind
posted on
2022-06-05 17:14
大话人生
阅读(
386
) 评论(
0
)
编辑
收藏
举报
刷新页面
返回顶部
