VUE transition实现展开/收起高度不确定的元素

Posted 2023-04-16

参考技术A 最近遇到一个需求，循环展示列表，每个列表要有收起和展开的功能，由于每个列表的高度不确定，在写vue-transition的时候遇到了问题。

我一开始想参考element-ui 中 collapse 的处理方式，源码也可以拿来用，后来上述作者给的处理方法也能正常使用，就没再看源码。以下是处理方式

原链接写的更详细，各位可以参考原链接哦！

vue展开收起小例子

<template>
  <div class="wrap">
    <div class="box">
      <div v-for="item in showItem">{{item}}</div>
      <div @click="showAll = !showAll">{{btnText}}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      foodList: [
        "苹果", "香蕉", "橙子", "葡萄", "橘子" ,"柚子","柿子" //进行显示的数据
      ],
      showAll: false  //标记数据是否需要完全显示的属性
    }
  },
  computed: {
    showItem() {
      if (this.showAll == false) { //当数据不需要完全显示的时候
        var showItem = [];　　　　　//定义一个空数组
        if (this.foodList.length > 4) {　//这里我们先显示前四个
          for (var i = 0; i < 4; i++) {
            showItem.push(this.foodList[i])
          }
        } else {
          showItem = this.foodList
        }
        return showItem;　//返回当前数组
      } else {
        return this.foodList;
      }
    },
    btnText() {
      if (this.showAll == false) {  //对文字进行处理（枚举）
        return "展开全部"
      } else {
        return "收起"
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>