使用vue创建一个吸顶的菜单项--简单版

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' }
        }
      ]
    },