基於@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可靈活控制內部布局。

復雜效果實現

 

同一頁面窗口放大時效果