龙岗 网站建设哪,中国建设网官方网站企业,wordpress自定义媒体库,百度投放广告一天多少钱问题描述
VUE菜单有一个BUG#xff0c;当我们点击其它按钮或者首页的时候#xff0c;已经展示的一级菜单是不会自动收缩的。这个问题也导致很多开发者把一级菜单都换成了二级菜单。
错误展示
错误的效果请看下图。 解决方法
1、寻找菜单文件
因为我使用的是ruoyi的前端框… 问题描述
VUE菜单有一个BUG当我们点击其它按钮或者首页的时候已经展示的一级菜单是不会自动收缩的。这个问题也导致很多开发者把一级菜单都换成了二级菜单。
错误展示
错误的效果请看下图。 解决方法
1、寻找菜单文件
因为我使用的是ruoyi的前端框架所以菜单文件的路径是src/layout/components/Sidebar/index.vue文件如果大家使用的是其他的框架或者自己写的去全局搜索关键字【el-menu】就能找到菜单页面。文件路径如下图 2、添加以下代码
// el-menu菜单中添加ref和open事件
el-menu refmenu openhandleOpen/el-menu
data() {return {// 记录用户上次点击的菜单索引keyIndex:0,};},watch: {$route () {// 监控用户点击的菜单如果是首页或者个人详情页面都要把上次打开的页面收缩起来。if (this.$route.path /index ||this.$route.path /user/profile) {this.$refs.menu.close(this.keyIndex);}}},methods: {handleOpen (key) {this.keyIndex key;}}, 3、完整的代码
templatediv :class{has-logo:showLogo} :style{ backgroundColor: settings.sideTheme theme-dark ? variables.menuBackground : variables.menuLightBackground }logo v-ifshowLogo :collapseisCollapse /el-scrollbar :classsettings.sideTheme wrap-classscrollbar-wrapperel-menurefmenuopenhandleOpen:default-activeactiveMenu:collapseisCollapse:background-colorsettings.sideTheme theme-dark ? variables.menuBackground : variables.menuLightBackground:text-colorsettings.sideTheme theme-dark ? variables.menuColor : variables.menuLightColor:unique-openedtrue:active-text-colorsettings.theme:collapse-transitionfalsemodeverticalsidebar-itemv-for(route, index) in sidebarRouters:keyroute.path index:itemroute:base-pathroute.path//el-menu/el-scrollbar/div
/templatescript
import { mapGetters, mapState } from vuex;
import Logo from ./Logo;
import SidebarItem from ./SidebarItem;
import variables from /assets/styles/variables.scss;export default {components: { SidebarItem, Logo },data() {return {keyIndex:0,};},watch: {$route () {if (this.$route.path /index ||this.$route.path /user/profile) {this.$refs.menu.close(this.keyIndex);}}},methods: {handleOpen (key) {this.keyIndex key;}},computed: {...mapState([settings]),...mapGetters([sidebarRouters, sidebar]),activeMenu() {const route this.$route;const { meta, path } route;// if set path, the sidebar will highlight the path you setif (meta.activeMenu) {return meta.activeMenu;}return path;},showLogo() {return this.$store.state.settings.sidebarLogo;},variables() {return variables;},isCollapse() {return !this.sidebar.opened;}}
};
/script4、修改后的效果 5、到此功能完成 -----华丽的分割线以下是凑字数大家不用花时间看快去改代码-----
-----华丽的分割线以下是凑字数大家不用花时间看快去改代码-----
-----华丽的分割线以下是凑字数大家不用花时间看快去改代码-----
templatediv v-if!item.hiddentemplate v-ifhasOneShowingChild(item.children,item) (!onlyOneChild.children||onlyOneChild.noShowingChildren)!item.alwaysShowapp-link v-ifonlyOneChild.meta :toresolvePath(onlyOneChild.path, onlyOneChild.query)el-menu-item :indexresolvePath(onlyOneChild.path) :class{submenu-title-noDropdown:!isNest}item :icononlyOneChild.meta.icon||(item.metaitem.meta.icon) :title$t(onlyOneChild.meta.title) //el-menu-item/app-link/templateel-submenu v-else refsubMenu :indexresolvePath(item.path) popper-append-to-bodytemplate slottitleitem v-ifitem.meta :iconitem.meta item.meta.icon :titleitem.meta.title //templatesidebar-itemv-forchild in item.children:keychild.path:is-nesttrue:itemchild:base-pathresolvePath(child.path)classnest-menu//el-submenu/div
/templatescript
import path from path
import { isExternal } from /utils/validate
import Item from ./Item
import AppLink from ./Link
import FixiOSBug from ./FixiOSBugexport default {name: SidebarItem,components: { Item, AppLink },mixins: [FixiOSBug],props: {// route objectitem: {type: Object,required: true},isNest: {type: Boolean,default: false},basePath: {type: String,default: }},data() {this.onlyOneChild nullreturn {}},methods: {hasOneShowingChild(children [], parent) {if (!children) {children [];}const showingChildren children.filter(item {if (item.hidden) {return false} else {// Temp set(will be used if only has one showing child)this.onlyOneChild itemreturn true}})// When there is only one child router, the child router is displayed by defaultif (showingChildren.length 1) {return true}// Show parent if there are no child router to displayif (showingChildren.length 0) {this.onlyOneChild { ... parent, path: , noShowingChildren: true }return true}return false},resolvePath(routePath, routeQuery) {if (isExternal(routePath)) {return routePath}if (isExternal(this.basePath)) {return this.basePath}if (routeQuery) {let query JSON.parse(routeQuery);return { path: path.resolve(this.basePath, routePath), query: query }}return path.resolve(this.basePath, routePath)}}
}
/script
