vue实现收起展开面板，让你的页面动态起来

前言

你是否在开发中遇到过需要展开和收起面板的需求？使用 vue 可以轻松实现这一功能，让用户体验更加友好。本文将为大家介绍 vue 实现收起展开面板的方法，让你的页面更加简洁美观。

---

常规 css 实现

实现效果

---

源码如下

<template>
  <div class="maxBox">
    <div class="leftBox" :style="{width: play ? '30%' : '0px', transition: '0.3s'}" ref="leftNode">
      <div v-if="play">内容</div>
    </div>
    <div ref="btnNode" class="btnBox" @click="toggle" :title="play ? '点击收起' : '点击展开'"
      :style="{transform: play ? 'rotate(360deg)' : 'rotate(180deg)', left: play ? '30%' : '0px', transition: '0.3s'}"> <img
        src="https://i.postimg.cc/c4zMGwGj/sq.png" class="imageBox" /> </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        play: true
    };
  },
  methods: {
    toggle() {
      this.play = !this.play;
    },
  },
};
</script>

<style scoped>
.maxBox {
  width: 100%;
  height: 100%;
  background: cornflowerblue;
  position: relative;
}
.leftBox {
  position: absolute;
  height: 100%;
  background: cadetblue;
}
.btnBox {
  position: absolute;
  top: calc(50% - 40px);
  cursor: pointer;
  z-index: 999;
}
.imageBox {
  width: 35px;
  height: 80px;
}
</style>

---

通过 scss 实现

实现效果

---

源码如下

<template>
  <div class="parentBox">
    <!-- 弹出内容 -->
    <div class="leftSlide" v-show="!hideLeft">
      <div class="item">
        <h6>2000</h6>
        <p>第一行的标题</p>
      </div>
      <div class="item">
        <h6>8463</h6>
        <p>第二行的标题</p>
      </div>
      <div class="item">
        <h6>2187</h6>
        <p>第三行的标题</p>
      </div>
      <div class="item">
        <h6>4214</h6>
        <p>第四行的标题</p>
      </div>
      <div class="item">
        <h6>9824</h6>
        <p>第五行的标题</p>
      </div>
      <div class="item">
        <h6>1025</h6>
        <p>第六行的标题</p>
      </div>
    </div>
    <!-- 操作按钮 -->
    <div class="slideBtn" :class="hideLeft ? 'show' : 'hide'" @click="hideLeft = !hideLeft"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hideLeft: true, //是否隐藏 slide
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.parentBox {
  width: 100%;
  height: 100%;
  background: rgb(0, 25, 46);
  color: #c8c8c8;
  // 打开的容器
  .leftSlide {
    height: 45vh;
    width: 10vw;
    z-index: 999;
    // 自己用的时候换成本地图片
    background: url("https://i.postimg.cc/ZnbKZ0s5/bg-map-l.png");
    background-size: 100% 100%;
    background-color: rgba(11, 26, 62, 0.6);
    padding: 1vh 1vw 1vh 2vw;
    display: flex;
    flex-direction: column;
    .item {
      height: 7vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
  // 点击按钮
  .slideBtn {
    width: 1.3vw;
    height: 5.5vh;
    position: absolute;
    top: 19.8vh;
    z-index: 999;
    cursor: pointer;
    &.hide {
      // 自己用的时候换成本地图片
      background: url("https://i.postimg.cc/65TthkDg/sbtn.png");
      background-size: 100% 100%;
    }
    &.show {
      // 自己用的时候换成本地图片
      background: url("https://i.postimg.cc/zBD9GWN6/sbtn1.png");
      background-size: 100% 100%;
    }
  }
}
</style>