boss/uni/module/main/index.vue

<template>
  <view id="main">
    <main-menu class="main-menu" :class="{ 'menu-show': menuShow }" @clickSub="routePath"/>
    <component class="main-content" :is="currentComponent"></component>
  </view>
</template>

<script>
import MainMenu from "./components/menu"
import routerMixin from "./mixins/router.js"

export default {
  components: {
    MainMenu
  },
  mixins: [routerMixin],
  data() {
    return {
      // 菜单是否折叠
      menuShow: false,
    }
  },
  onLoad(options) {
    this.checkPath(options)
    //#ifdef H5
    document.addEventListener('keydown', e => {
    	const keyCode = e.keyCode || e.which || e.charCode
    	if(keyCode === 27 || keyCode === 112) this.toggleMenuShow()
    })
    //#endif
  },
  methods: {
    // 切换菜单显示
    toggleMenuShow() {
      this.menuShow = !this.menuShow
    },
    // 检查入场的参数 path,并且明确子组件,模拟路由
    checkPath(options) {
      if(!options.path) this.routePath({ path: `withdraw` })
      else this.navigate(options)
    },
    routePath({ path, params }) {
      let paramStr = ""
      if(params) {
        Object.keys(params).forEach(key => {
          paramStr += `${key}=${params[key]}&`
        })
        // console.log(paramStr)
      }
      uni.redirectTo({
        url: `/module/main/index?path=${path}&${paramStr}`
      })
    }
  }
}
</script>

<style lang='less' scoped>
@transformWidth: 40px;
#main {
  position: relative;
  display: flex;
  height: 100%;

  .main-menu {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 2;
    transform: translate(calc(-100% + @transformWidth - 4px), 0);
    transition: transform 0.1s linear;
    box-shadow: 0 0 8px 0 green;
    &:hover {
      transform: translate(0);
    }
  }

  .menu-show {
    transform: translate(0);
  }

  .main-content {
    width: calc(100% - @transformWidth);
    height: 100%;
    transform: translate(@transformWidth, 0);
    overflow-x: scroll;
  }
}
</style>