• 3vue后台整体布局完善

    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=" 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=" 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=" 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=" 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=" 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=" 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>
  • 相关阅读:
    python之numpy多维数组
    运用python绘图
    关于爬取babycenter.com A-Z为顺序的所有英文名及其详细属性
    Python 之列表切片的四大常用操作
    没点B树，怎么搞懂数据库索引底层原理（B+Tree）
    App弱网测试与常用模拟工具
    白盒测试理解与示例 与Jacoco
    APP弱网测试 抓包软件就能用于模拟弱网（Fiddler、Charles）
    获取系统属性值
    互联网常用架构-还需继续扩展学
  • 原文地址：https://www.cnblogs.com/jingzaixin/p/16344393.html
Copyright © 2020-2023  润新知