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。另求各路大神指点,感谢大家。