3.使用ElementUI搭建側邊欄及頂部欄

1. 安裝ElementUI

ElementUI是基于 Vue 2.0 的桌面端組件庫。使用之前，需要在項目文件夾中安裝ElementUI，在終端中輸入以下命令，進行安裝。

npm i element-ui -S

并在main.js中引入ElementUI
在這里插入圖片描述

2. 使用elmentUI組件進行頁面布局

2.1 清空原有頁面樣式

App.vue

<template><div id="app"><router-view/></div>
</template>

HomeView.vue

<template><div class="home"></div>
</template>
<script>export default {name: 'HomeView',}
</script>

Aboutview.vue

<template><div class="about"></div>
</template>

2.2 拷貝elmentUI布局樣式到App.vue

在 ElementUI上找到下面的實例以及對應的代碼。
在這里插入圖片描述

<el-container style="height: 500px; border: 1px solid #eee"><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>導航一</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>導航二</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>導航三</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="text-align: right; font-size: 12px"><el-dropdown><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><span>王小虎</span></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><style>.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}
</style><script>export default {data() {const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'};return {tableData: Array(20).fill(item)}}};
</script>

**注意：**把代碼放在的上面。
在這里插入圖片描述

運行樣式效果如下：
在這里插入圖片描述

2.3 創建全局樣式文件并引入

2.3.1 創建global.css文件

上面的樣式與瀏覽器有間隙，需要創建一個global.css用于寫全局樣式。截圖如下：
在這里插入圖片描述
global.css代碼如下：

body {/*設置距離屏幕的邊距*/margin: 0;padding: 0;/*    隱藏溢出 清除浮動*/overflow: hidden;
}
/*把所有的元素變成盒狀模型:應用“box-sizing: border-box;”樣式后，盒子border和padding的參數值是被包含在width和height之內的。*/
* {/*外邊距不會額外占用1px的像素*/box-sizing: border-box;}

2.3.2 在main.js中引入這個css文件

在這里插入圖片描述

import '@/assets/global.css'

在這里插入圖片描述

2.3.3 調試側邊欄、頭部、表格組件樣式

（1）去掉默認展開第1和第3個菜單欄的樣式（藍色選中）
在這里插入圖片描述
（2）左側側邊欄向下拉滿
添加紅框內的代碼

（3）去布局組件的邊框
刪除藍色選中的代碼，使上下左右都完全貼屏。

（4）創建一個manager.css文件
用于寫頁面樣式，同樣main.js中引入這個css文件。

2.3.4 更換側邊欄圖標（可選）

在ElementUI icon中找到喜歡的圖標
在這里插入圖片描述
復制圖標類名更換下圖紅色框框的值

最終樣式：
在這里插入圖片描述
最終代碼：
App.vue

<template><div><el-container style="height: 500px;"><!--      側邊欄--><el-aside  class="m-aside"><!--        logo和系統名稱--><div class="m-sysName" ><img src="@/assets/logo.png" alt="" width="10%"><span class="m-nameText">xxx系統</span></div><!--        側邊菜單欄--><el-menu class="el-menu" ><el-submenu index="1"><template slot="title"><i class="el-icon-user"></i>用戶管理</template><el-menu-item index="1-1">選項1</el-menu-item><el-menu-item index="1-2">選項2</el-menu-item></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-news"></i>信息管理</template><el-menu-item index="2-1">選項1</el-menu-item><el-menu-item index="2-2">選項2</el-menu-item></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-set-up"></i>系統設置</template><el-menu-item index="3-1">選項1</el-menu-item><el-menu-item index="3-2">選項2</el-menu-item></el-submenu></el-menu></el-aside><!--      右側--><el-container class="right-container"><!--        頂部菜單欄--><el-header class="top-header"><img src="@/assets/avtar.jpg" alt="" style="width: 40px;border-radius: 50%;margin-right: 10px;"><span style="color: #4c5a73;font-weight: bold;font-size: 14px;margin-right: 20px">王小虎</span><el-dropdown><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-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><router-view/></div>
</template><script>export default {data() {const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'};return {tableData: Array(20).fill(item)}}};
</script>

manager.css

/*左側邊欄*/
.m-aside{width:270px;background-color: #39465C;overflow: hidden;min-height: 100vh;
}
/*側邊欄上面logo*/
.m-sysName{height:70px;display:flex;align-items: center;padding-left: 20px;border-bottom: 1px solid #4c5a73;
}
/*側邊欄上面的文字*/
.m-nameText{color: #e4e7e6;margin-left: 10px;font-size: 18px;font-weight: bold;
}
/*側邊欄菜單欄*/
.el-menu{background-color: #39465C;border-right:none !important;
}
/*頭部欄樣式*/
.el-header {background-color: #ffffff;border-bottom: 1px solid gainsboro;color: #333;height: 70px !important;line-height: 70px;
}
/* 右側背景顏色*/
.right-container{background-color: #EFF3F6;height: 100vh;
}
/*頂部居中*/
.top-header{font-size: 12px;/*設置垂直居中 先display:flex;在設置垂直居中，水平居右*/display: flex;align-items: center;justify-content: right;
}
/*側邊欄菜單一級字體顏色*/
.el-submenu__title{color: #e9e9e9;
}
/*側邊欄菜單懸浮背景顏色*/
.el-menu-item:hover, .el-submenu__title:hover {background: rgba(92, 113, 147, 0.24);}
/*側邊欄二級字體顏色*/
.el-menu-item {color: #e9e9e9;
}
/*二級菜單選中背景和顏色設置*/
.el-menu-item.is-active {color: #11cfd2;font-size: 14px;background: rgba(92, 113, 147, 0.24);
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/72761.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/72761.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/72761.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！