Hello大家好，本章我們建立Home頁側邊欄，中間顯示區域 。有問題可以聯絡我mr_beany@163.com。另求各路大神指點，感謝
一：建立新頁面用於跳轉
建立static→css→common.css
h2{
margin: 0;
}
li {
list-style: none
}
.disFlex {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
.padding{
padding: 20px;
}
::-webkit-scrollbar
{
width: 10px;
height: 10px;
background-color: #F5F5F5;
}
/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #ccc;
}複製程式碼修改main.js 引入css
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import router from './router'
//引入自己的通用css
import '../static/css/common.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
}) 複製程式碼建立page→Index.vue
<template>
<div>
<div style="text-align: center;margin-bottom: 20px">
<h2>歡迎使用MyVue</h2>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
created: function () {
},
methods: {},
components:{
}
}
</script>
<style>
</style> 複製程式碼建立page→user→user.vue
<template>
<div>
<div style="border-radius: 5px;padding: 5px;">
<el-table
:data="userData"
stripe
style="width: 100%">
<el-table-column
align="center"
prop="name"
label="姓名">
</el-table-column>
<el-table-column
align="center"
prop="sex"
:formatter ="sexFilterFun"
label="性別">
</el-table-column>
<el-table-column
align="center"
prop="age"
label="年齡">
</el-table-column>
<el-table-column
align="center"
prop="address"
label="地址">
</el-table-column>
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small">詳情</el-button>
<el-button type="text" size="small">編輯</el-button>
<el-button type="text" size="small" style="color: #f56c6c">禁用</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
userData: [
{name: "張三", sex: 0, age: 23, address: "遼寧大連中山"},
{name: "李四", sex: 0, age: 23, address: "遼寧大連中山"},
{name: "王五", sex: 0, age: 23, address: "遼寧大連中山"}
]
}
},
created: function () {
},
methods: {
sexFilterFun(row, column, cellValue, index){
return cellValue == 0 ? '男':'女';
}
}
}
</script>
<style scoped>
</style>複製程式碼其中el-table標籤等為elementui表格的基礎用法。
修改src→router→index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/page/Home'
import Login from '@/page/Login'
import Index from '@/page/Index'
import User from '@/page/user/user'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Login
},
{
path: '/home',
component: Home,
//這裡注意
children: [
{path: "", component: Index},
{path:"/user", component:User}
]
}
]
}) 複製程式碼注意：其中設定路由時，需配置children屬性，將路由設為Home頁得子路由。
二：修改Home.vue
<template>
<div style="height: 100%;background: #283542;background-size: 100%">
<div class="header-div disFlex">
<el-tooltip class="item" effect="light" content="返回首頁" placement="right">
<div class="header-div-left disFlex">
<span class="user-name">MyVue</span>
</div>
</el-tooltip>
<div class="disFlex header-div-right">
<div style="padding: 0px 10px;">
<img src="../images/userHeaderImg.png" style="width: 25px;"/>
</div>
<div>
<span>{{userName}}</span>
</div>
</div>
</div>
<div class="disFlex" style="height: calc(100% - 90px);padding:0 15px;">
<div class="menu-list-div">
<div v-for="(menu,index) in menuList" :key="menu.id">
<div @click="showMenu(index)" class="menu-list-bgc disFlex">
<div style="width: 80%;">
<span>{{menu.menuName}}</span>
</div>
<div style="width: 20%;text-align: right;">
<i class="el-icon-arrow-right"
:class="[menu.isOpen == 1?'rotate':'rotate1']"
v-if="menu.adminMenuList.length > 0"></i>
</div>
</div>
<el-collapse-transition>
<div v-show="menu.isOpen==1">
<!--router-link 類似於HTML中a標籤，用於頁面跳轉 其中to屬性為需要跳轉的路徑-->
<router-link tag="li" :to="menuSon.query == undefined? menuSon.path : menuSon.path + menuSon.query"
v-for="(menuSon,index1) in menu.adminMenuList"
:key="menuSon.id">
<div class="menuSon-list-bgc"
@click="showMenuSon(index,index1)"
:class="[menuSon.isOpen==1?'menuSon-list-color':'menuSon-list-color1']">
<span>{{menuSon.menuName}}</span>
</div>
</router-link>
</div>
</el-collapse-transition>
</div>
</div>
<div style="width: 100%;margin-left: 20px;">
<!--重點 類似於HTML中iframe 路由跳轉頁面在這裡展示-->
<router-view class="routerView" :key="$route.fullPath"></router-view>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
//選單列表
menuList: [],
//當前登陸的使用者名稱稱
userName: '',
}
},
created: function () {
//模擬登陸成功獲取當前使用者許可權選單
this.getMenuList();
this.userName = "MyVue";
},
methods: {
getMenuList(){
this.menuList = [
{
menuName: "使用者管理", isOpen: 0,
adminMenuList: [
{menuName: "檢視使用者", isOpen: 0, path: "/user"}
]
}
];
},
showMenu(index) {
this.menuList.forEach(function (item, i) {
if (i === index) {
return;
}
item.isOpen = 0;
})
this.menuList[index].isOpen = this.menuList[index].isOpen === 1 ? 0 : 1;
var menu = this.menuList[index];
menu.adminMenuList.forEach(function (item, i) {
menu.adminMenuList[i].isOpen = 0;
})
},
showMenuSon(index, index1) {
var menu = this.menuList[index];
menu.adminMenuList.forEach(function (item, i) {
if (i != index1) {
menu.adminMenuList[i].isOpen = 0;
} else {
menu.adminMenuList[i].isOpen = 1;
}
})
},
closeMenu() {
this.menuList.forEach(function (item) {
this.isOpen = 0;
})
},
}
}
</script>
<style>
a {
color: #fff;
}
.header-div {
background-color: #2C3E50;
color: #fff;
height: 70px;
align-items: center;
box-shadow: 3px 0 3px rgba(0, 0, 0, .3);
padding-left: 10px;
margin-bottom: 20px;
}
.header-div-left {
align-items: center;
}
.header-div-left:hover {
cursor: pointer;
}
.header-div-right {
align-items: center;
width: calc(100% - 120px);
justify-content: flex-end;
}
.header-div-right :hover {
cursor: pointer;
}
.user-name {
margin-left: 10px;
font-weight: bold;
font-size: 20px
}
.menu-list-div {
width: 12%;
max-width: 190px;
height: calc(100% - 30px);
background-color: #2C3E50;
font-size: 16px;
border-radius: 5px;
padding: 5px;
overflow-y: auto;
}
.menu-list-bgc {
background-color: #2C3E50;
color: #fff;
align-items: center;
padding: 15px;
cursor: pointer;
}
.menuSon-list-bgc {
margin-top: 5px;
background-color: #2C3E50;
padding: 10px 15px 10px 30px;
border-radius: 5px;
}
.menuSon-list-color {
background-color: #21598f;
color: #fff;
border-left: 4px solid;
cursor: pointer;
}
.menuSon-list-color1 {
margin-top: 5px;
color: #fff;
padding: 10px 15px 10px 34px;
cursor: pointer;
}
.routerView {
width: 100%;
background: rgba(255, 255, 255, 1);
border-radius: 5px;
height: calc(100% - 20px);
border: 0;
}
</style> 複製程式碼三：啟動專案，測試
cmd進到專案根目錄下，執行npm run dev複製程式碼瀏覽器輸入localhost:8080，輸入任意賬號密碼登陸
專案地址
寫文章不易，如對您有幫助，請幫忙點下star
結尾
搭建建立Home頁側邊欄，中間顯示區域已完成，後續功能接下來陸續更新，有問題可以聯絡我mr_beany@163.com。另求各路大神指點，感謝大家。