vue之侧边栏展开收起

学习侧边栏展开收起

原理：
动态计算右边主区域内容。动态更改css样式，过渡使操作圆润

代码

<template>
  <div class="home">
    <div class="main">
      <ul class="left_main" :class="{ left_main_shou: !openStatus }">
        <h1 @click="change">{{ openText }}</h1>
        <li>首页</li>
        <li>首页</li>
        <li>首页</li>
        <li>首页</li>
        <li>首页</li>
        <li>首页</li>
        <li>首页</li>
      </ul>

      <div class="right_main" :class="{ right_main_show: !openStatus }">
        主内容
      </div>
    </div>
  </div>
</template>

<style scoped>
.main {
  display: flex;
  width: 100%;
  height: 100vh;
}

.left_main {
  border: solid 1px red;
  width: 300px;
  text-align: center;
  background-color: aquamarine;
  transition: width 1s;
  -webkit-transition: width 1s; /* Safari */
}
.left_main li {
  list-style: none;
}
.right_main {
  width: calc(100% - 300px);
  border: solid 1px rgb(116, 12, 235);
  background-color: brown;
  transition: width 1s;
  -webkit-transition: width 1s; /* Safari */
}
.left_main_shou {
  width: 100px;
}
.right_main_show {
  width: calc(100% - 100px);
}
</style>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  components: {},
  data: function () {
    return {
      openText: "收起",
      openStatus: true,
    };
  },
  methods: {
    change() {
      this.openStatus = !this.openStatus;
      if (this.openStatus) {
        this.openText = "收起";
      } else {
        this.openText = "打开";
      }
    },
  },
};
</script>