折叠面板小功能

今天项目让弄一个折叠面板

UI库里的不太适用

然后就自己弄了一个

直接上代码

<template>
  <div>
    <!-- 按钮里面的文字没做动态控制 -->
    <button @click="isOpenFold(foldClass)">点我展开或收起</button>
    <div class="progress-bar" :class="foldClass">
        这里是展开显示的东西
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foldClass: "fold-close",
    };
  },
  methods: {
    isOpenFold(calssName) {
      this.foldClass = className = "fold-open" ? "fold-close" : "fold-open";
    },
  },
};
</script>

<style lang="scss">
.fold-open {
  transition: max-height 0.5s cubic-bezier(1, 0, 1, 0);
  max-height: 999px;
}
.fold-close {
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  max-height: 0;
}
.progress-bar {
  overflow: hidden;
}
</style>

以上就是折叠面板的一个小功能