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';

更多样式参考：

Vue中使用vue2-perfect-scrollbar制作滚动条

element-ui 实现响应式导航栏的示例代码

到此这篇关于vue移动端时弹出侧边抽屉菜单的文章就介绍到这了,更多相关vue弹出侧边抽屉菜单内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！