Vue可伸缩工具栏

<template>
 <div class="main">
  <div class="toolbar" :class="{ toolbar_show: !openStatus }">
   <el-button type="primary" size="small">点击</el-button>
   <el-button type="primary" size="small">点击</el-button>
   <el-button type="primary" size="small">点击</el-button>
   <el-button type="primary" size="small">点击</el-button>
   <el-button type="primary" size="small">点击</el-button>
   <el-button type="primary" size="small">点击</el-button>
   <el-button type="primary" size="small">点击</el-button>
  </div>
  <i @click="change" v-if="fold_unfold" class="el-icon-s-fold" style="font-size:42px;"></i>
  <i @click="change" v-else class="el-icon-s-unfold" style="font-size:42px;"></i>
 </div>
</template>
<script>
export default {
 name: 'Always',
 data() {
  return {
   openStatus: false,
   fold_unfold: false,
  }
 },
 methods: {
  change() {
   if (this.openStatus) {
    setTimeout(() => {
     this.fold_unfold = false
    }, 1000)
   } else {
    setTimeout(() => {
     this.fold_unfold = true
    }, 1000)
   }
   this.openStatus = !this.openStatus
  },
 },
}
</script>
<style lang="scss" scoped>
.main {
 display: flex;
 .toolbar {
  width: 500px;
  height: 32px;
  padding: 5px 0;
  background-color: pink;
  transition: width 1s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
 }
 .toolbar_show {
  width: 0px;
 }
}
</style>