vue+饿了么 后台管理 布局
项目用的vue-cli2 +element UI搭建目前布局的目录src:assets//放置一些静态资源components:home//布局login//登录view//组件页面router //路由配置目前效果:router.js文件import Vue from 'vue'import...
·
项目用的vue-cli2 +element UI搭建
目前 布局的 目录
src:
assets //放置一些静态资源
components:
home //布局
login //登录
view //组件页面
router //路由配置
目前效果:
router.js文件
import Vue from 'vue'
import Router from 'vue-router'
import demo from '@/components/view/demo' //单独的导航页面 不能用懒加载引入
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'login',
component: ()=> import('../components/login/login.vue'),
hidden: true //在导航栏不显示 作为参数传过去控制
},
{
path: '/demo',
name: '单独点击',
leaf: true, //只有一个节点 点击即跳转
component: ()=> import('../components/home/home.vue'),
iconCls: 'el-icon-s-home',
children: [
{ path: '/demo2', component: demo, name: '单独的' },
]
},
{
path: '/account',
name: '账号管理',
component: ()=> import('../components/home/home.vue'), //布局页面
children: [ //其他导航只跳转children
{
path: '/staff',
name: '员工管理', //通过name值传递渲染侧边导航和面包屑
iconCls: 'el-icon-s-grid menumedia', //icon图标
component: ()=> import('../components/view/account/staff.vue'),
},
{
path: '/user',
name: '用户管理',
iconCls: 'el-icon-s-grid menumedia',
component: ()=> import('../components/view/account/user.vue'),
},
]
},
{
path: '/operation',
name: '运营管理',
component: ()=> import('../components/home/home.vue'), //布局页面
children: [
{
path: '/subsidy',
name: '政策补贴',
iconCls: 'el-icon-s-grid menumedia',
component: ()=> import('../components/view/operation/operation.vue'),
},
]
},
]
})
login.vue登录页面
<template>
<!-- 一个提交按钮对应一个el-form model表单数据对象 rules表单验证规则 -->
<div class="login-container">
<el-form
:model="ruleForm2" :rules="rules2"
status-icon
ref="ruleForm2"
label-position="left"
label-width="0px"
class="demo-ruleForm login-page">
<h3 class="title">系统登录</h3>
<el-form-item prop="username">
<el-input type="text"
v-model="ruleForm2.username"
auto-complete="off"
placeholder="用户名"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password"
v-model="ruleForm2.password"
auto-complete="off"
placeholder="密码"
></el-input>
</el-form-item>
<el-checkbox
v-model="checked"
class="rememberme"
>记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name:"login",
data(){
return {
logining: false,
ruleForm2: {
username: 'admin',
password: '123456',
},
rules2: {
username: [{required: true, message: '请您输入用户名', trigger: 'blur'}],
password: [{required: true, message: '请您输入密码', trigger: 'blur'}]
},
checked: true
}
},
methods: {
handleSubmit(event){
localStorage.setItem('user', this.ruleForm2.username); //保存登录名
this.$router.push({path: '/account'}); //跳到账号管理
}
}
};
</script>
<style scoped>
.login-container {
width: 100%;
height: 100%;
}
.login-page {
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 180px auto;
width: 350px;
padding: 35px 35px 15px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
margin: 0px 0px 15px;
text-align: left;
}
</style>
home.vue布局页面
<template>
<div id="home">
<el-container class="menu">
<!-- header -->
<el-header class="header">
<h4 class="header-tit">我来照顾运营管理平台</h4>
<!-- header右边部分 -->
<rightmenu class="rightmenu"></rightmenu>
</el-header>
<el-container>
<!-- 侧边导航 -->
<el-aside>
<el-row class="tac">
<!--强行加入动画过度隐藏效果-->
<!-- default-active:当前激活菜单的 index collapse:是否水平折叠收起菜单 -->
<transition name="el-fade-in">
<el-menu :default-active="$route.path"
class="el-menu-vertical-demo"
unique-opened router
@open="handleOpen"
v-if="!isCollapse"
:collapse="isCollapse"
:class="{'isCollapseFalseStyle':isCollapse!=true}">
<!--将路由赋给视图 循环 没有hidden属性的展示-->
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" v-if="!item.leaf">
<template slot="title">
<i :class="item.iconCls"></i>
<span slot="title" :class="{'navName': isActive == item.path}" @click="clickname(item.path)">{{item.name}}</span>
</template>
<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path"
v-if="!child.hidden">{{child.name}}
</el-menu-item>
</el-submenu>
<!-- 没有children的leaf属性 点击直接跳转 -->
<el-menu-item v-if="item.leaf" :index="item.children[0].path">
<i :class="item.iconCls"></i>
<span slot="title"> {{item.children[0].name}}</span>
</el-menu-item>
</template>
</el-menu>
</transition>
</el-row>
</el-aside>
<!-- 右侧布局显示区域 -->
<el-main>
<!-- 面包屑 -->
<div class="breadcrumb">
<!-- 点击图标 左侧导航出现和隐藏切换 -->
<i :class="[isCollapse==false?'el-icon-s-fold':'el-icon-s-unfold']" @click="changeMenu"></i>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="item in levelList" :key="item.path" :to="{ path: item.path }">
{{item.name}}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!-- 跳转展示的区域 -->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import rightmenu from './rightmenu'
export default {
components:{
rightmenu
},
name: "home",
data() {
return {
isCollapse: false, //false为出现 true为隐藏
levelList:null,
isActive: 0
}
},
methods: {
//渲染面包屑 获取router的name元素
getBreadcrumb() {
//$route.matched一个数组 包含当前路由的所有嵌套路径片段的路由记录
let matched = this.$route.matched.filter(item => item.name)
this.levelList = matched
},
handleOpen(key, keyPath) {
//console.log(key, keyPath);
},
handleClose(key, keyPath) {
// console.log(key, keyPath);
},
//点击图标切换隐藏侧边栏
changeMenu() {
if (this.isCollapse) {
this.isCollapse = false
} else {
this.isCollapse = true
}
},
//点击根据路径判断 导航变色
clickname: function(path) {
this.isActive = path;
console.log(path)
}
},
watch:{
//监听路由变化,自动缩减左边菜单栏目 渲染面包屑
$route(){
let width=document.body.clientWidth;
if(width>=700){
this.isCollapse = false;
}else{
this.isCollapse = true;
}
//面包屑监听路由变化
this.getBreadcrumb()
},
},
//页面初始获取路由信息渲染给面包屑
created() {
this.getBreadcrumb()
},
mounted(){
//console.log(this.$router.options.routes)
}
};
</script>
<style scoped>
#home{
background: #f2f2f2;
width: 100%;
height: 100%;
}
.menu {
width: 100%;
height: 100%;
}
.div-logo {
width: 100%;
height: 135px;
}
img {
width: 45%;
}
.header {
font-size: 25px;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-tit{
margin-left: 20px;
color: #fff;
}
.breadcrumb{
display: flex;
align-items: center;
margin-bottom: 20px;
}
.breadcrumb i{
font-size: 25px;
margin-right: 20px;
}
.el-header,
.el-footer {
background-color: #b3c0d1;
color: #333;
text-align: center;
}
.el-breadcrumb-item{
font-size:16px;
}
.el-aside {
background-color: #fff;
color: #333;
text-align: center;
line-height: 200px;
}
body>.el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
.el-submenu {
text-align: center;
}
.el-menu-item {
text-align: center;
padding: 0 !important;
}
.el-submenu .navName{
width: 100%;
display: inline-block;
background: #409EFF;
color: #fff;
}
.el-submenu i{
display: none !important;
}
.el-aside {
width: auto !important;
}
.isCollapseFalseStyle{
width: 200px !important;
}
@media screen and (min-width: 700px) {
.header {
background: #409EFF;
};
}
@media screen and (max-width: 700px) {
.header {
background: #409EFF;
};
}
</style>
rightmenu.vue 布局页面header的子组件
<template>
<div class="rightmenu">
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<!-- 用户名 -->
<p style="line-height:60px;font-weight:650;font-style:normal;color:#FFFFFF;margin-right:18px;">{{ fullName }}</p>
<!-- 图片 -->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562068714079&di=a1260d80c5ee35880c3e7cbf0a27461c&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F655ba5b31bc6243428a306b10a7f895b36d3d3d35a1e-5phgk4_fw658"
style="width:40px;height:40px;border-radius:20px;cursor:pointer;">
</div>
<!-- 点击弹出部分 -->
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<el-dropdown-item>
<span style="display:block;" @click="userInfo">账号信息</span>
</el-dropdown-item>
<el-dropdown-item divided>
<span style="display:block;" @click="update">修改密码</span>
</el-dropdown-item>
<el-dropdown-item divided>
<span style="display:block;" @click="logout">退出</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dialog
title="修改密码"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-form
ref="ruleForm2"
:model="ruleForm2"
status-icon
:rules="rules2"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item
label="旧密码"
prop="oldPwd"
>
<el-input
v-model="ruleForm2.oldPwd"
/>
</el-form-item>
<el-form-item
label="新密码"
prop="pass"
>
<el-input
v-model="ruleForm2.pass"
autocomplete="off"
/>
</el-form-item>
<el-form-item
label="确认密码"
prop="checkPass"
>
<el-input
v-model="ruleForm2.checkPass"
autocomplete="off"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="submitForm('ruleForm2')"
>提交</el-button>
<!-- <el-button @click="resetForm('ruleForm2')">重置</el-button> -->
</el-form-item>
</el-form>
<span
slot="footer"
class="dialog-footer"
hidden
>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button
type="primary"
@click="dialogVisible = false"
>确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
name: 'rightmenu',
data() {
var checkOldPwd = (rule, value, callback) => {}
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'))
} else {
if (this.ruleForm2.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass')
}
callback()
}
}
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== this.ruleForm2.pass) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
return {
loginName: '超级管理员',
fullName: '超级管理员',
dialogVisible: false,
userName: '超级管理员',
ruleForm2: {
oldPwd: '',
pass: '',
checkPass: ''
},
rules2: {
oldPwd: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
pass: [{ required: true, validator: validatePass, trigger: 'blur' }],
checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
// oldPwd: [
// { validator: checkOldPwd, trigger: 'blur' }
// ]
}
}
},
mounted() {
this.fullName = window.localStorage.getItem('user')
},
methods: {
//异步函数 不阻塞后面执行
async logout() {
window.localStorage.removeItem('user')
this.$router.push("/")
},
userInfo() {
// this.$router.push(`/user/user_info`)
},
//修改密码 弹出框
update() {
// this.$router.push(`/user/update`)
this.dialogVisible = true
},
// 修改弹出框相关
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done()
})
.catch(_ => {})
},
submitForm(formName) {
},
resetForm(formName) {
this.$refs[formName].resetFields()
}
}
}
</script>
<style scoped>
.top {
background: #409eff;
margin-bottom: 20px;
padding: 0 60px;
}
.el-dropdown-menu {
position: absolute;
top: 43px!important;
padding: 3px;
text-align: center;
width: 130px;
overflow:visible;
}
.el-dropdown-menu__item {
line-height: 30px!important;
}
.avatar-wrapper{
display: flex;
align-items: center;
margin-right: 30px;
}
</style>
其他组件 写在view文件里即可 在路由里面配好
更多推荐
已为社区贡献28条内容
所有评论(0)