vue移动端时弹出侧边抽屉菜单

效果图：

aside.vue:

<template>
  <div class="aside">
    <div
      style="
        height: 60px;
        background-color: #2e6baa;
        line-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <img
        src="https://lj-common.oss-cn-chengdu.aliyuncs.com/vue.png"
        style="width: 30px; height: 30px"
      />
      <span
        style="
          font-size: 20px;
          font-weight: 600;
          color: white;
          margin-left: 10px;
        "
        >xxx平台</span
      >
    </div>
    <perfect-scrollbar>
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        background-color="#017BC4"
        text-color="white"
        active-text-color="white"
      >
        <el-menu-item index="/page1" @click="$router.push({ path: '/page1' })">
          <el-image
            src="https://lj-common.oss-cn-chengdu.aliyuncs.com/vue.png"
            style="width: 30px; height: 30px; margin-right: 5px"
          ></el-image>
          <span slot="title">page1</span> </el-menu-item
        ><el-menu-item index="/page2" @click="$router.push({ path: '/page2' })">
          <el-image
            src="https://lj-common.oss-cn-chengdu.aliyuncs.com/vue.png"
            style="width: 30px; height: 30px; margin-right: 5px"
          ></el-image>
          <span slot="title">page2</span>
        </el-menu-item>
      </el-menu>
    </perfect-scrollbar>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {},
};
</script>

 
<style lang='scss' scoped>
.aside {
  height: 100vh;
  .ps {
    height: calc(100vh - 60px);
    //展开时宽度
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 256px;
    }
    .el-menu {
      height: 100%;
      border: 0 !important; //垂直时，去除右侧白边
    }
    //item激活时的样式
    .el-menu-item.is-active {
      background-color: #1890ff !important;
      border-bottom: 0 !important;
    }
  }
}
</style>

控制抽屉显隐：

    <el-drawer
      :visible.sync="drawer"
      direction="ltr"
      :with-header="false"
      :size="256"
    >
      <vAside></vAside>
    </el-drawer>

 <i  class="el-icon-s-unfold hidden-sm-and-up"  @click="collapseChange"></i>

<script>
import vAside from "./aside.vue";
export default {
  name: "home",
  components: { vAside },
  props: {},
  data() {
    return {
      drawer: false,
    };
  },
  methods: {
    // 切换折叠状态
    collapseChange() {
      this.drawer = !this.drawer;
    },
  },
};
</script>

由于上面使用了hidden-sm-and-up样式，该样式需要在main.js中引入display.css，如下：

import 'element-ui/lib/theme-chalk/display.css';

更多样式参考：elementUI响应式隐藏元素_~疆的博客-CSDN博客_element ui 隐藏元素main.js中引入使用类名https://blog.csdn.net/qq_40323256/article/details/125178963

由于还使用了perfect-scrollbar组件，故还需要下载该组件，参考：

Vue中使用vue2-perfect-scrollbar滚动条_~疆的博客-CSDN博客_vue2-scrollbar官方地址：https://github.com/mercs600/vue2-perfect-scrollbar下载：main.js中引用：使用：https://blog.csdn.net/qq_40323256/article/details/125195137