1.hover时候出现,总体来说只改了一下两个index.vue,还有route文件
src\layoutTwo\index.vue
<template>
<div class="main_container_webgl">
<!-- <div :class="classObj" class="app-wrapper">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<div >
<div :class="{'fixed-header':fixedHeader}">
</div> -->
<app-main />
<div class="my_menu_hover">
<sidebar />
</div>
</div>
</template>
<script>
import {
Navbar,
Sidebar,
AppMain
} from './components'
import ResizeMixin from './mixin/ResizeHandler'
export default {
name: 'LayoutTwo',
components: {
Navbar,
Sidebar,
AppMain
},
mixins: [ResizeMixin],
computed: {
sidebar() {
return this.$store.state.app.sidebar
},
device() {
return this.$store.state.app.device
},
fixedHeader() {
return this.$store.state.settings.fixedHeader
},
classObj() {
return {
hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === 'mobile'
}
}
},
methods: {
handleClickOutside() {
this.$store.dispatch('app/closeSideBar', {
withoutAnimation: false
})
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
// 测试菜单
#app {
.main_container_webgl {
.my_menu_hover {
height: 50px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background: rgba(0, 0, 0, 0);
/deep/.my_layout_sidebar_test {
width: 100%;
height: 0px;
line-height: 0px;
overflow: hidden;
background: rgba(0, 0, 0, 0.2);
font-size: 15px;
color: white;
display: flex;
justify-content: space-between;
/deep/.my_layout_sidebar_test_li {
display: inline-block;
width: 200px;
height: 100px;
line-height: 100px;
.my_font {
text-align: center;
color: white;
}
.my_font:hover {
color: #49e0ff;
}
}
}
}
.my_menu_hover:hover {
height: 150px;
transition: all .5s linear;
background: rgba(0, 0, 0, 0.5);
border: 1px solid black;
/deep/.my_layout_sidebar_test {
height: 100px;
line-height: 100px;
font-size: 20px;
/deep/.my_layout_sidebar_test_li {
display: inline-block;
width: 200px;
height: 100px;
line-height: 100px;
}
}
}
}
}
// 测试菜单
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$sideBarWidth});
transition: width 0.28s;
}
.hideSidebar .fixed-header {
width: calc(100% - 54px)
}
.mobile .fixed-header {
width: 100%;
}
</style>
src\layoutTwo\components\Sidebar\index.vue
<template>
<ul class="my_layout_sidebar_test">
<li v-for="route in routes" :key="route.path" class="my_layout_sidebar_test_li">
<app-link :to="route.redirect">
<div class="my_font">{{route.meta.title}}</div>
</app-link>
</li>
</ul>
</template>
<script>
import {
mapGetters
} from 'vuex';
import AppLink from './Link'
import Logo from './Logo';
import SidebarItem from './SidebarItem';
import variables from '@/styles/variables.scss';
export default {
components: {
SidebarItem,
Logo,AppLink
},
computed: {
...mapGetters(['sidebar']),
routes() {
let arr = this.$router.options.routes.filter(_ => _.hidden === false)
return arr;
},
activeMenu() {
const route = this.$route;
const {
meta,
path
} = route;
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu;
}
return path;
},
showLogo() {
return this.$store.state.settings.sidebarLogo;
},
variables() {
return variables;
},
isCollapse() {
return !this.sidebar.opened;
}
}
};
</script>
<style lang="less" scoped>
</style>
src\layoutTwo\components\Sidebar\Link.vue
<template>
<!-- eslint-disable vue/require-component-is -->
<component v-bind="linkProps(to)">
<slot />
</component>
</template>
<script>
import { isExternal } from '@/utils/validate'
export default {
props: {
to: {
type: String,
required: true
}
},
methods: {
linkProps(url) {
if (isExternal(url)) {
return {
is: 'a',
href: url,
target: '_blank',
rel: 'noopener'
}
}
return {
is: 'router-link',
to: url
}
}
}
}
</script>
route
{
path: '/login',
component: () => import('@/views/login/index'),
meta: { title: 'login', icon: 'dashboard' },
hidden: true
},
{
path: '/',
hidden: false,
component: layoutTwo,
redirect: '/dashboard',
meta: { title: '首頁', icon: 'dashboard' },
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/FFF/FFF01'),
meta: { title: '首頁', icon: 'dashboard' }
}
]
},
{
path: '/FFFOne',
hidden: false,
component: layoutTwo,
redirect: '/FFFOne/first',
meta: { title: 'FFFOne', icon: 'dashboard' },
children: [
{
path: 'first',
name: 'first',
component: () => import('@/views/FFF/FFF01'),
meta: { title: '首頁', icon: 'dashboard' }
}
]
},
