一、 router=>config 菜单(menu)
多级菜单样式,id用来控制权限
{
id:'1000',
text: '时间带',
icon: timer_icon,
children: [
{
id:'1001',
text: '汇总',
path: '/timer_total1',
view: 'timer/total1'
},
{
id:'1002',
text: '单店',
path: '/timer_store',
view: 'timer/store'
},
],
},
{
id:'2000',
text: '鲜食',
icon: fresh_icon,
children: [
{
id:'2001',
text: '汇总',
path: '/fresh_total',
view: 'fresh/total'
},
{
id:'2002',
text: '分类',
path: '/fresh_category',
view: 'fresh/category'
},
{
id:'2003',
text: '单品',
path: '/fresh_product',
view: 'fresh/product'
},
],
},
修改菜单图标样式
1、引入图片
import timer_icon from '@/assets/timer.png'
import fresh_icon from '@/assets/fresh.png'
import setting_icon from '@/assets/setting.png'
import system_icon from '@/assets/system.png'
2、设置菜单图片
id:'1000',
text: '时间带',
icon: timer_icon, //菜单图片
3、显示菜单图片 (SidebarMenu 文件中)
<img v-if="menu.icon" class="menu_icon" :src="menu.icon"/>
二、Sidebar 菜单侧边栏
修改宽度及背景
.Sidebar {
position: relative;
min-height: 100vh;
min-width: 200px; //最小宽度
background: #242536;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
&:not(.is-collapse) {
width: 200px; //默认宽度
}
> i {
position: absolute;
display: inline-block;
top: 0;
right: -50px;
font-size: 24px;
line-height: $topbarHeight;
padding: 0 10px;
color: rgba(0, 0, 0, 0.6);
cursor: pointer;
&:hover {
color: rgba(0, 0, 0, 0.8);
}
}
}
二、SidebarMenu 明细菜单栏
可单独修改菜单背景 等
背景 文字颜色、展开效果等
<el-menu
:default-active="$route.path"
:collapse="collapse"
:collapse-transition="false"
:text-color="variables.menuTextColor"
:background-color="variables.menuBackgroundColor"
router
unique-opened
>
展示菜单图片
<img v-if="menu.icon" class="menu_icon" :src="menu.icon"/>
权限设置
1、权限列表 根据 菜单(menu)中id对应
data() {
return {
listAuth:['1000','1001','1002','2000','2001','2002','2003','8001','8002'],
}
},
2、权限过滤
computed: {
//menus:()=> menus,
menus()
{
console.log('设置菜单权限')
let uMenus = []
if(!this.listAuth || this.listAuth.length == 0)
{
return uMenus
}
for (let menu of menus)
{
//0 开头全部要
if(menu.id.substring(0,1) == '0')
{
uMenus.push(menu)
continue;
}
if(this.listAuth.find(a=>a === menu.id))
{
if(menu.children)
{
let childs = []
for (let child of menu.children)
{
if(this.listAuth.find(a=>a === child.id))
{
childs.push(child)
}
}
menu.children = childs
}
uMenus.push(menu)
}
}
return uMenus
}, //=> menus,
},
四、SidebarLogo 菜单头部图标
五、UserLinks 用户名称 退出登录、修改密码等
六、Breadcrumb 顶部路径栏
七、layout.vue 布局页面
注:用户缓存
1、缓存文件路径 store=> modules=>account
2、用户登录时,缓存用户信息,同时缓存时间
storage.setUserInfo(userInfo)
state.userInfo = userInfo
//保存 用户登录时间
let timespan = Date.parse(new Date())
storage.setUserInfoTime(timespan.toString());
console.log("保存用户信息")
3、获取用户信息时、判断缓存是否失效
userInfo: function (state) {
if (!state.userInfo) {
//获取内存用户信息
let uInfo = storage.getUserInfo()
if(uInfo)
{
//获取用户登录时间
let strtime = storage.getUserInfoTime()
if(strtime)
{
//计算过期时间
let vaildtime = Number(strtime) + useValidTime
let timespan = Date.parse(new Date())
console.log(vaildtime + ',' + timespan)
if(timespan < vaildtime)
{
console.log("用户未过期")
state.userInfo = uInfo;
return state.userInfo;
}
}
console.log("用户已过期")
clearUserInfo()
}
}
return state.userInfo
},
4、登录打开时,校验用户是否失效
created: function () {
that = this
if(this.userInfo)
{
this.$router.replace(homePath)
return
}
this.isShow = true
},
computed: {
userInfo () {
return this.$store.getters['account/userInfo'];
}
},