前言：
在网上找了好久关于左右过渡动画折叠的组件，没有合适的代码，效果类似于element UI中的Drawer抽屉组件，只不过ele中的都是悬浮的组件，工作中遇到的很多都是占用空间的展开折叠，网上很多也是上下展开收起的组件，于是就自己写了一个。

1.整个应用页面采用弹性盒布局，左边容器的宽度固定px，右边容器宽度为 flex:1。

html：

<div class="current-page">
    // 引入组件
    <pack-up>
        <div>我是文字文字文字</div>
    </pack-up>
     <div class="right">
        右边的数据数据数据数据
     </div>
  </div>

css：

.current-page{
  width: 100%;
  height: 100%;
  display: flex;
}
.left{
  width: 500px;
}
.right{
  flex: 1;
}

2.关于组件

html：

 <div class="curr-contents" ref="outerDiv">
    <div class="show-areas" v-show="openflags">
      <!-- 内容插槽 -->
      <slot></slot>
    </div>
    <div class="pack-ups" ref="packUps" @click="handlePack">
      <i class="el-icon-arrow-right"></i>
    </div>
  </div>

css：

.curr-contents{
    width: 500px;
    height: 100%;
    position: relative;
    background: lightpink;
    transition: all .5s ease-in-out;
    padding: 0 10px;
    /* transition: height .3s; */
  }
  .curr-contents .pack-ups{
    height: 100%;
    background: lightcyan;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .5s ease-in-out;
  }
  .show-areas{
    transition: all .5s ease-in-out;
  }

核心js代码：

// 点击展开 折叠
handlePack(){
  this.openflags=!this.openflags
  const liCon = this.$refs.outerDiv
  let packUps=this.$refs.packUps
  if (this.openflags) { // 展开
    liCon.style.width = 'auto'
    liCon.style.width = this.liConWidth + 'px'
    packUps.style.position='absolute'
    packUps.style.left='auto'
    packUps.style.right='0'
  } else { // 收起
    liCon.style.width = 0 + 'px'
    packUps.style.position='absolute'
    packUps.style.right='auto'
    packUps.style.left='0'
  }
}

利用v-show使得被折叠的内容不被销毁，缓存之前的数据
也可以用font-size:0来隐藏内容区

3.完整代码：

父组件：

<template>
  <div class="current-page">
    <pack-up>
        <div>我是文字文字文字</div>
    </pack-up>
     <div class="right">
        右边的数据数据数据数据
     </div>
  </div>
</template>
<script>
import packUp from "./component/packUp"
export default {
  name:'',
  components:{ packUp },
  data(){
    return{}
  },
  mounted(){},
  methods:{}
}
</script>
<style scoped>
.current-page{
  width: 100%;
  height: 100%;
  display: flex;
}
.left{
  width: 500px;
}
.right{
  flex: 1;
}
</style>

子组件：

<template>
  <div class="curr-contents" ref="outerDiv">
    <div class="show-areas" v-show="openflags">
      <!-- 内容插槽 -->
      <slot></slot>
    </div>
    <div class="pack-ups" ref="packUps" @click="handlePack">
      <i class="el-icon-arrow-right"></i>
    </div>
  </div>
</template>
<script>
export default {
  name:'',
  data() {
    return {
      liConWidth:500, // 左边容器的宽度
      openflags:true,
    }
  },
  methods: {
    // 点击展开 折叠
    handlePack(){
      this.openflags=!this.openflags
      const liCon = this.$refs.outerDiv
      let packUps=this.$refs.packUps
      if (this.openflags) { // 展开
        liCon.style.width = 'auto'
        liCon.style.width = this.liConWidth + 'px'
        packUps.style.position='absolute'
        packUps.style.left='auto'
        packUps.style.right='0'
      } else { // 收起
        liCon.style.width = 0 + 'px'
        packUps.style.position='absolute'
        packUps.style.right='auto'
        packUps.style.left='0'
      }
    }
  }
}
</script>
<style scoped>
 .curr-contents{
    width: 500px;
    height: 100%;
    position: relative;
    background: lightpink;
    transition: all .5s ease-in-out;
    padding: 0 10px;
    /* transition: height .3s; */
  }
  .curr-contents .pack-ups{
    height: 100%;
    background: lightcyan;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .5s ease-in-out;
  }
  .show-areas{
    transition: all .5s ease-in-out;
  }
</style>

转载请注明原作者
不喜勿喷，欢迎补充~~