Vue可伸缩工具栏

<template>
 <div class="main">
  <div class="toolbar" :class="{ toolbar_show: !openStatus }">
   <el-button type="primary" size="default">点击</el-button>
  </div>
  <i @click="change" v-if="openStatus" class="el-icon-s-fold" style="font-size:52px;"></i>
  <i @click="change" v-else class="el-icon-s-unfold" style="font-size:52px;"></i>
 </div>
</template>
<script>
export default {
 data() {
  return {
   openStatus: true,
  }
 },
 methods: {
  change() {
   this.openStatus = !this.openStatus
  },
 },
}
</script>
<style lang="scss" scoped>
.main {
 display: flex;
 .toolbar {
  width: 200px;
  padding: 5px 0;
  background-color: pink;
  transition: width 1.5s;
  overflow: hidden;
 }
 .toolbar_show {
  width: 0px;
 }
}
</style>

标签：1.5,伸缩,工具栏,methods,show,width,Vue,openStatus,toolbar
来源： https://www.cnblogs.com/lyt520/p/15741464.html