在做之前，先看是否安装了路由
实现效果：
image.png
image.png
image.png
image.png
image.png
image.png
1、新建navigationBar.vue
内容如下：
<template>
<div>
<div class="navigationBar">
<!-- 顶部导航栏 -->
<div class="topNavigationBar">
<el-menu
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<!-- <el-menu-item class="top" v-for="(item,index) in nav" :key="index" :index="item.name" v-show="top">
{{ item.navItem }}
</el-menu-item> -->
<el-dropdown v-show="!top" class="dropdown" trigger="click">
<span class="el-dropdown-link" style="line-hight:60px">
<img class="img" src="../assets/drop.png" >
</span>
<el-dropdown-menu slot="dropdown" >
<el-dropdown-item v-for="(item,index) in nav" :key="index" class="dropdown-item">
<img class="imgDown" :src="item.imgUrl" >
{{item.navItem}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="user" v-show="userInfor" v-for="u in user" :key="u.username">
<img class="img" :src="u.imgUrl" style="border-radius:50%;">
{{ u.username }}
<div @click="outLogin" style="color:#ffffff;text-decoration: none;margin-left:10px">退出登录</div>
</div>
<div class="user" v-show="!userInfor">
<router-link to="/login" style="color:#ffffff;text-decoration: none;">登录</router-link>
</div>
</el-menu>
</div>
<!-- 侧边导航栏 -->
<div class="sideNavigationBar">
<div v-show="left">
<el-menu
:default-active="this.$route.path"
router mode="horizontal"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item class="side" v-for="(item,index) in nav" :key="index" :index="item.name" >
<img class="img" :src="item.imgUrl" >
<template slot="title">
<span> {{ item.navItem }}</span>
</template>
</el-menu-item>
</el-menu>
</div>
<div v-show="!left">
<el-menu
:default-active="this.$route.path"
router mode="horizontal"
class="el-menu-vertical-demo2"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
:collapse="isCollapse">
<el-menu-item class="side2" v-for="(item,index) in nav" :key="index" :index="item.name" >
<el-tooltip class="item" effect="dark" :content="item.navItem" placement="right">
<img class="img" :src="item.imgUrl">
</el-tooltip>
</el-menu-item>
</el-menu>
</div>
<div class="contents">
<!-- 显示内容 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
<script>
// 引入图片
import bird from "@/assets/bird.png";
import plane from "@/assets/plane.png";
import book from "@/assets/book.png";
import lamp from "@/assets/lamp.png";
import flower from "@/assets/flower.png";
import home from "@/assets/home.png";
export default {
data(){
return{
left: true,
top: true,
isCollapse: true,
userInfor:false,
touxiang:'',
username:'',
// 获取屏幕宽度
screenWidth:document.body.clientWidth,
nav: [
{name:'/one',navItem:'用户管理',imgUrl:bird},
{name:'/two',navItem:'权限管理',imgUrl:plane},
{name:'/three',navItem:'配置管理',imgUrl:home},
{name:'/components/User',navItem:'角色管理',imgUrl:book},
{name:'/components/Personnel',navItem:'定时任务补偿',imgUrl:lamp},
],
//用户信息
user:'',
}
},
created(){
//获取用户信息
this.user = JSON.parse(sessionStorage.getItem('user'))
console.log(this.user)
},
methods: {
// 初始屏幕宽度
initialScreenWidth(){
window.screenWidth = document.body.clientWidth
this.screenWidth = window.screenWidth
console.log(screenWidth)
if (this.screenWidth <= 700) {
this.left = false,
this.top = false;
}else{
this.left = true;
this.top = true;
}
},
//根据屏幕宽度，显示对应导航栏
getscreenWidth(){
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
this.screenWidth = window.screenWidth
console.log(screenWidth)
if (this.screenWidth<=700) {
this.left = false;
this.top = false;
}else{
this.left = true;
this.top = true;
}
})()
}
},
getUser(){
let user =this.user.forEach(item => {
this.username = item.username;
console.log(this.username)
});
if (!this.username == ' ') {
this.userInfor = true
}else{
// this.$message({
// showClose: true,
// message: '登录异常，请重新登录',
// type: 'error'
// });
}
},
outLogin(){
this.user = ''
sessionStorage.setItem('user', JSON.stringify(this.user));
console.log(this.user)
if (this.user == '') {
this.$router.push(
{
path:'/login'
}
)
this.$message({
message: '退出成功',
showClose: true,
type: 'success'
});
}else{
this.$message({
showClose: true,
message: '退出异常，请稍后再试！',
type: 'error'
});
}
}
},
mounted(){
this.initialScreenWidth();
this.getscreenWidth();
this.getUser();
},
watch: {
screenWidth (val) {
if(!this.timer) {
this.screenWidth = val
this.timer = true
let that = this
setTimeout(function (){
that.timer = false
},400)
}
}
}
}
</script>
<style>
.navigationBar{
background-color: #EEEEEE;
}
.el-menu-vertical-demo{
width: 150px;
height: calc(100vh - 62px);
/* height: 100% */
}
.user{
float: right;
margin-right: 15px;
height: 60px;
display: flex;
vertical-align: middle;
align-items: center;
color: #ffffff;
}
.el-dropdown-link{
display: flex;
vertical-align: middle;
}
.sideNavigationBar{
display: flex;
vertical-align: middle;
}
.el-menu-vertical-demo2{
width: 50px;
height: calc(100vh - 62px);
/* height: 100% */
}
/* .el-menu.el-menu--horizontal {
border-bottom: none;
} */
.side{
width: 150px;
}
.side2{
width: 50px;
padding-left: 10px;
}
.img{
width: 30px;
height: 30px;
margin-right: 5px;
}
.dropdown{
width: 38px;
height: 58px;
float: right;
display: flex;
align-items: center;
}
.dropdown-item{
display: flex;
vertical-align: middle;
align-items: center;
}
.imgDown{
width: 25px;
height: 25px;
margin-right: 10px;
}
.contents{
background-color: #ffffff;
width: 90%;
margin: 20px;
border-radius: 10px;
}
</style>
2、app.vue：
<template>
<div id="app">
<div v-if="$route.meta.keepAlive">
<sidebar></sidebar>
</div>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
import sidebar from './components/sidebar'
export default {
name: 'App',
components:{sidebar},
}
</script>
<style>
*{
margin: 0px;
padding: 0px;
}
#app {
}
</style>
3、新建几个vue文件，用来放内容：
<template>
<div class="contents">
{{message}}
</div>
</template>
<script>
export default {
data() {
return {
message:'用户管理'
};
},
methods: {
}
}
</script>
<style>
.contents{
}
</style>
4、新建login.vue
<template>
<div class="login">
<div class="login-area">
<div class="loginTitle">
登录
</div>
<div class="inputLine">
<el-form label-width="60px" class="demo-ruleForm">
<el-form-item label="账号：" prop="name">
<el-input class='input' placeholder="请输入账号" prefix-icon="el-icon-user" v-model="account" style="margin-bottom:15px"></el-input>
</el-form-item>
<el-form-item label="密码：" prop="name">
<el-input class='input' placeholder="请输入密码" prefix-icon="el-icon-unlock" v-model="password"></el-input>
</el-form-item>
</el-form>
</div>
<div class="loginButton">
<el-button type="success" plain class="clickLogin" @click="login()">登录</el-button>
<div class="forgotPasswd" @click="forgotPasswd">忘记密码</div>
</div>
</div>
</div>
</template>
<script>
import touxiang from "@/assets/timg.jpg";
export default {
data(){
return{
//账户
account:'',
password:'',
// 账号提示状态
accountTipState : false,
passwordTipState : false,
//用户信息
user: [
{imgUrl:touxiang,username:'admin'}
],
}
},
methods:{
login(){
let account = this.account
let password = this.password
console.log(account);
console.log(password);
if (account == 'admin' && password == '123456') {
this.$router.push(
{
path:'/'
}
)
this.$message({
message: '登录成功',
showClose: true,
type: 'success'
});
sessionStorage.setItem('user', JSON.stringify(this.user));
sessionStorage.setItem('password', this.password)
sessionStorage.setItem('account', this.account)
}else if( account !== 'admin' || password !== '123456') {
this.$message({
showClose: true,
message: '账户或密码错误',
type: 'error'
});
}
else{
this.$message({
showClose: true,
message: '账户或密码不能为空',
type: 'error'
});
}
},
forgotPasswd(){
this.$message({
showClose: true,
message: 'XXX',
type: 'error'
})
}
},
watch:{
// 监听账号
account: function(newQuestion, oldQuestion) {
if(newQuestion === '') {} else {
this.accountTipState = false
}
},
// 监听密码
password: function(newQuestion, oldQuestion) {
if(newQuestion === '') {} else {
this.passwordTipState = false
}
}
},
mounted(){
}
}
</script>
<style>
.login{
width: 100%;
height: 100%;
background-color: #eeeeee;
overflow:hidden;
}
.login-area{
width: 350px;
height: 450px;
/* height: 450px; */
background-color: #fff;
margin-right: 15%;
margin-top: 10%;
margin-bottom: 15%;
margin-left: auto;
border-radius: 10px;
box-shadow: 0 2px 12px 0 #eeedee
}
.loginTitle{
width: 100%;
height: 150px;
text-align: center;
line-height: 150px;
font-size: 20px
}
.inputLine{
width: 85%;
margin: 0 auto;
}
.input{
width: 95%;
}
.loginButton{
width: 35%;
margin: 30px auto;
}
.clickLogin{
width: 100%;
margin-bottom: 15px;
}
.forgotPasswd{
width: 1000px !important;
color:#eeeeee;
text-decoration: none;
padding-left: 26px;
}
</style>
网友评论