vue实现收起展开面板

Posted 2022-02-28 水星记_

实现效果

代码展示

<template>
  <div class="maxBox">
    <!-- 左侧容器 -->
    <div class="leftBox" v-if="play">内容</div>
    <!-- 点击容器 -->
    <div ref="btnNode" class="btnBox" @click="toggle">
      <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;
      //通过点击事件判断play的样式
      if (this.play) 
        this.$refs.btnNode.style = "left:30%";
       else 
        this.$refs.btnNode.style = "transform:rotate(180deg);left:0px"; //transform:rotate(180deg):翻转180度
      
    ,
  ,
;
</script>

<style scoped>
/* 最外层的盒子 */
.maxBox 
  width: 100%;
  height: 100%;
  background: cornflowerblue;
  position: relative;

/* 左侧容器样式 */
.leftBox 
  position: absolute;
  width: 30%;
  height: 100%;
  background: cadetblue;

/* 点击容器样式 */
.btnBox 
  position: absolute;
  top: calc(50% - 40px);
  left: 30%;
  cursor: pointer;
  z-index: 999;

/* icon图片的样式 */
.imageBox 
  width: 35px;
  height: 80px;

</style>