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

Bliss ·

更新时间:2024-09-21

· 987 次阅读

效果图：

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弹出侧边抽屉菜单内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

VUE 菜单抽屉

1024 个赞