elment-ui的侧边栏开关及窗口联动-Toy模板网

这篇具有很好参考价值的文章主要介绍了elment-ui的侧边栏开关及窗口联动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

elment-ui的侧边栏开关及窗口联动,ui,javascript,vue.js 文章来源地址https://www.toymoban.com/news/detail-612063.html

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