2021.7.30
坑24(element-plus、el-icon、图标大小):目标是改变el-icon的大小,默认大小是16px*16px。方法:改变元素字体大小font-size即可(一般想不到吧),如下:
// html
<i class="el-icon-user userIcon" />
// css
.userIcon{
font-size: 20px;
}
坑25(element-plus、el-dropdown、鼠标指针样式):目标是使鼠标指针悬浮在下拉菜单链接上时,显示为手。不做相关设置前,因为链接上有文字和图标,悬浮时会是箭头或指示文字可以被选中的'工'型。方法:设置鼠标指针样式cursor: pointer即可。
.el-dropdown-link {
cursor: pointer;
}
坑26(vue3、vue-router4、登录权限):目标是限制部分页面的进入权限(需要登录获取到token)。方法:在需要权限限制的页面的路由的meta中加入属性needLogin:true,在app.vue全局设置路由守卫router.beforeEach()如下,此处token在登录成功后存储到浏览器的localStorage:
<script>
import { useRouter } from 'vue-router'
export default {
name: 'App',
setup(){
const router=useRouter()
router.beforeEach((to,from,next)=>{
if(!to.meta.needLogin){
// 不用token,自由进入
next()
}else if(window.localStorage.getItem('testToken')){
// 正式需判断token是否过期
// 有token,顺利进入
next()
}else{
// 无token,禁止进入
next('/login')
}
})
}
}
</script>
坑27(vue3、vue-router4、element-plus、el-menu、动态显示菜单、v-for):目标是根据路由信息动态显示菜单,首页固定,不加入动态展示。
需对路由进行一定配置,主要是设置子路由与meta信息,配合实现菜单的动态显示。
根据路由信息显示菜单项规则:具有meta.title和children属性的路由会被加载为子菜单,其子路由会作为子菜单项被加载,会用到子路由中的path(用于跳转)和meta.title属性。
主要用到v-for进行循环渲染实现,因为菜单信息不会变化故不需要添加响应性。
修改菜单组件如下:(activeMenuItemIndex用于根据当前路由显示选中菜单项,相关代码略)
<template>
<el-menu
:default-active="activeMenuItemIndex"
router>
<el-menu-item index='/index'>首页</el-menu-item>
<el-submenu v-for="(route,idx) in subMenuRoutes" :key="idx" :index="String(idx)">
<template #title>{{route.meta.title}}</template>
<el-menu-item v-for="(childRoute,cidx) in route.children" :key="cidx" :index='childRoute.path'>{{childRoute.meta.title}}</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
import { useRouter } from 'vue-router'
export default {
name:'AsideMenu',
setup() {
const router=useRouter()
// 获取作为目录的路由信息
const subMenuRoutes=router.options.routes.filter(r=>r.meta && r.meta.title && r.children)
return {
subMenuRoutes
}
</script>
by 莫得感情踩坑机(限定)