超级简单Vue实现手风琴布局

说一下效果：
全部展开效果：
超级简单Vue实现手风琴布局
展开都的话四等分收起一个，其余的三等分，收起两个，其余的等分，展开一个，占据所有空间。

全部折叠效果：
超级简单Vue实现手风琴布局
展开一个效果：

超级简单Vue实现手风琴布局
这一块一块的总共是组件复用了四次。所以单独看一个列表就好了（已截止）
结构如下

<template>
  <div class="foldable-list" v-if="toggle">
  
  // 注意 header和底下的header
    <header>
     // 块的title
     <p class="title">
        {{ $t('canlendar.' + list.name) }} ( {{ list.list.length }} )
      </p>
      <p class="toogle" @click="toggle = !toggle">
         {{ toggle ? '收起' : ‘展开’ }}
      </p>
    </header>

    // 块的list
    <div class="list">
      <p class="title dark-bg">
      // list的titles
      </p>
      // list-mian为数据展示部分，可滚动
      <ul class="list-main">
        <li
          v-for="(item, index) in list.list"
          :class="{ 'dark-bg': index % 2 === 1 }"
        >
          <template v-for="(val, inx) in list.title">
            <span>
              {{ item[val] }}
            </span>
          </template>
        </li>
      </ul>
    </div>
  </div>

// 注意header
  <div class="foldable" v-else>
    <header>
      <p class="title">
        {{ $t('canlendar.' + list.name) }} ( {{ list.list.length }} )
      </p>
      <p class="toogle" @click="toggle = !toggle">
        {{ toggle ? '收起' : ‘展开’ }}
      </p>
    </header>
  </div>
</template>

list为上层传递的值，格式为
list: {
name: ‘XXX’ // title
list: [{}, {}, …] // list数组
title: [‘XXX’, ‘XXX’, ‘XXX’…]要展示的列名
}
其实发现<template>里面有一个v-if和v-else。展开的时候显示v-if，折叠的时候显示v-else。
这是为什么？
.foldable-list flex为1，按理只要里面的 // 块的list <div class="list" v-if=“toggle”>通过toggle展示与否就可以了，为什么不加v-if=“toggle”？要收起单独写一个头部（虽然和展开的头部一模一样，为什么不复用？）

因为

.foldable-list {
	flex: 1
}

当toggle为true的时候，正常显示，你以为toggle为false的时候

会乖乖的收起？不会的，只是底下的list无数据，在页面中展示的位置依然在（1/4的位置）。
为什么？
因为 .foldable-list为父组件，他占用的始终为四分之一，只要他没消失。就算他是个空壳，也是占用1/4.

所以问题的突破口就是点击收起的时候让 .foldable-list消失，用另一个高度为30px的代替，即出现了上面的代码。

完整代码：https://github.com/zhangsundf/vue-foldabelList/blob/master/FoldableList.vue

超级简单Vue实现手风琴布局

相关推荐