elment-ui的侧边栏开关及窗口联动

最新推荐文章于 2024-04-28 18:37:34 发布

quanmeiren

最新推荐文章于 2024-04-28 18:37:34 发布

阅读量527

点赞数

文章标签： ui javascript vue.js

本文链接：https://blog.csdn.net/quanmeiren/article/details/131952650

版权

这是一个使用Vue.js框架编写的后台管理系统侧边导航菜单。菜单包括后台首页、订单管理、商品管理、店铺管理、账号管理和销售统计等模块，支持响应式布局，可以根据屏幕宽度切换展开或折叠状态。

摘要由CSDN通过智能技术生成

请添加图片描述

<template>
  <div class="asders">
    <el-aside width="200px">
      <div class="boxbody">
        <div>源码外卖</div>
        <el-switch v-model="isCollapse" :active-value="true" :inactive-value="false"></el-switch>
      </div>

      <el-menu
        :collapse="isCollapse"
        router
        unique-opened
        :default-active="$router.path"
        class="el-menu-vertical-demo"
        background-color="rgba(220,38,38,0.2)"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="/last">
          <i class="el-icon-menu"></i>
          <span slot="title">后台首页</span>
        </el-menu-item>

        <el-menu-item index="/order">
          <i class="el-icon-menu"></i>
          <span slot="title">订单管理</span>
        </el-menu-item>

        <el-submenu index="/goods">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>商品管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/goods/list">商品列表</el-menu-item>
            <el-menu-item index="/goods/add">商品添加</el-menu-item>
            <el-menu-item index="/goods/index">商品分类</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-menu-item index="/shop">
          <i class="el-icon-menu"></i>
          <span slot="title">店铺管理</span>
        </el-menu-item>

        <el-submenu index="/account">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>账号管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/account/list">账号列表</el-menu-item>
            <el-menu-item index="/account/add">添加账号</el-menu-item>
            <el-menu-item index="/account/index">修改密码</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="/sale">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>销售统计</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/sale/goods">商品统计</el-menu-item>
            <el-menu-item index="/sale/index">销售统计</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false
    };
  },
  methods: {
    change() {
      this.isCollapse = !this.isCollapse;
    },
    handleResize() {
      console.log(document.body.offsetWidth);
      if (document.body.offsetWidth <= 700) {
        this.isCollapse = true;
      } else {
        this.isCollapse = false;
      }
    }
  },
  created() {
    this.handleResize;
    window.addEventListener("resize", this.handleResize);
  }
};
</script>

<style lang="scss" scoped>
.asders {
  height: 100%;
  background: url("../../assets/OIP-C.jpg") center, center/cover;
}
.el-menu {
  height: 100%;
  transition: all linear 0.3s;
}
.boxbody {
  height: 50px;
  display: flex;
  padding: 30px;
  align-items: center;

  background: url("../../assets/OIP-C.jpg") center center/cover;
  div {
    text-align: center;
    color: rgb(83, 50, 50);
    font-size: 18px;
    font-weight: bold;
  }
}
.el-aside {
  color: #333;
  text-align: center;
  line-height: 200px;
  height: 100%;
}
</style>