基于@vueuse/core + @vue/composition-api 实现多行元素展开/折叠功能

列表查询是很常见的功能，复杂的系统模块会有很多查询条件，默认只展示第一行查询条件是个不错的方案。

产品的方案是百变的，可能会让你一行展示固定数目的查询组件，也可能是根据屏幕宽度动态确定数量。

这个时候就很有必要来一个专门处理展开/折叠功能的组件，专注于展开/折叠功能。内部布局用css控制就行了。

实现方案灵感来至于https://segmentfault.com/a/1190000040030723

基于vue2+ @vueuse/core + @vue/composition-api 实现

废话不多说，直接上代码

<template>
  <!-- 折叠容器
       'is-collapse': isCollapse 根据isCollapse判断是否应用折叠样式
  -->
  <div
    ref="containerEl"
    class="collapse-container"
    :class="{
      'is-collapse': isCollapse,
      'collapse-right-bottom': collapseInRightBottom
    }"
  >
    <!-- 通过控制max-height来达到折叠/展开的效果 -->
    <div class="collapse-el" :class="isExpand ? 'expand' : ''">
      <!-- 利用css使折叠组始终在最右侧 -->
      <div class="right-group box-row box-center-end">
        <slot name="prefix"></slot>
        <div @click="isExpand = !isExpand">
          <slot v-if="isCollapse" name="collapse" v-bind="{ isExpand }">
            <el-button type="text" class="expand-btn">
              {{ isExpand ? '收起' : '展开' }}
              <i
                :class="isExpand ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </el-button>
          </slot>
        </div>
        <slot name="suffix"></slot>
      </div>

      <!-- 折叠面板 -->
      <div ref="collapsePanel" class="panel-el">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api';
import { useElementSize, useCssVar } from '@vueuse/core';

import { find } from 'lodash';
/**
 *
 */
export default defineComponent({
  name: 'UxCollapse',
  props: {
    // 是否默认展开
    defaultExpand: {
      type: Boolean,
      default: false
    },
    // 折叠容器是否始终在右下角
    collapseInRightBottom: {
      type: Boolean,
      default: true
    }
  },
  setup() {
    // 动态获取collapsePanel的高度
    // 要监听的元素必须是ref引用的元素
    const collapsePanel = ref(null);
    const { height } = useElementSize(collapsePanel);

    // 支持js设置var变量
    // var变量设置元素位置,必须是ref引用的元素
    const containerEl = ref(null);
    const maxHeight = useCssVar('--max-height', containerEl);
    return {
      collapsePanel,
      height,
      containerEl,
      maxHeight
    };
  },
  data() {
    return {
      // 是否开启折叠/展开功能（自动计算获取）
      isCollapse: false,
      // 折叠面板是否展开（isCollapse为true时生效）
      isExpand: false
    };
  },

  watch: {
    height() {
      // console.log('height', v);
      // 高度变化时，重新计算是否开启折叠功能
      this.adjustLayout();
    },
    isExpand(v) {
      // 抛出事件
      this.$emit('expandchange', v);
    }
  },

  methods: {
    /**
     * @description  计算是否开启折叠/展开功能
     */
    adjustLayout() {
      const me = this;
      me.$nextTick(() => {
        // 获取容器dom
        const el = me.$el;
        if (el) {
          // 延迟执行保证获取到子元素
          setTimeout(() => {
            // 获取折叠面对dom
            const collapsePanel = me.$refs.collapsePanel;
            const children = collapsePanel.children;
            // 如果折叠面板有子元素
            if (children.length) {
              // 获取第一个元素的offsetTop
              const firstOffsetTop = collapsePanel.firstChild.offsetTop;
              // 获取下一行第一个元素
              const nextRowChild = find(children, (item) => {
                return item.offsetTop > firstOffsetTop;
              });
              // 如果找不到下一行第一个元素，说明无需折叠
              this.isCollapse = !!nextRowChild;
              if (nextRowChild) {
                // 用下一行第一个元素的offsetTop减去第一个元素的offsetTop就是每一行的高
                const maxHeight = nextRowChild.offsetTop - firstOffsetTop;
                // 设置css变量
                this.maxHeight = maxHeight + 'px';
                // 设置默认展开状态
                this.isExpand = this.defaultExpand;
              }
            }
          });
        }
      });
    }
  }
});
</script>
<style scoped lang="scss">
@import '~@/assets/sass/all.scss';

// 开启折叠/展开功能后容器样式
.is-collapse {
  // flex布局高度计算才能使用百分百
  display: flex;
  // 收起/展开按钮
  .expand-btn {
    padding: 0;
  }
}
.collapse-right-bottom {
  .collapse-el {
    // 伪类动态设置高度实现将折叠组挤到最下方的效果
    &::before {
      content: '';
      height: calc(100% - var(--max-height));
      float: right;
    }
  }
}

// 折叠容器
::v-deep.collapse-container {
  --max-height: none;
  width: 100%;
  .collapse-el {
    width: 100%;
    overflow: hidden;
    // 通过设置最大高度来实现折叠时只显示一行的效果
    max-height: var(--max-height);
    &.expand {
      // 展开状态取消最大高度限制,实现展开效果
      max-height: none;
    }
  }
  .right-group {
    line-height: var(--max-height);
    // 保证折叠组始终在最右方
    float: right;
    clear: both;
  }
}

// 面板默认布局
::v-deep.panel-el {
  .item-el {
    display: inline-block;
  }
}
</style>

简单用法

<template>
  <uxCollapse>
    <div v-for="(item, i) in data" :key="i" class="item-el">{{ item }}</div>
  </uxCollapse>
</template>

 

<script>
import { defineComponent } from '@vue/composition-api';

import uxCollapse from '@/components/collapse';
export default defineComponent({
  name: 'vueuseCollapse',
  components: { uxCollapse },
  data() {
    return {
      data: ['张三', '李四', '王五', '赵六', '田七', '钱八', '孙九', '周十', '张三', '李四', '王五', '赵六', '田七', '钱八', '孙九', '周十']
    };
  }
});
</script>

 

<style lang="scss">
.item-el {
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
}
</style>

 

效果

 

每个子元素使用 display: inline-block; 布局即可，通过css可灵活控制内部布局。

复杂效果实现

 

同一页面窗口放大时效果