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

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

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

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

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

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

废话不多说，直接上代码

  1 
 38 
139 

简单用法

1 <template>
2   <uxCollapse>
3     <div v-for="(item, i) in data" :key="i" class="item-el">{{ item }}div>
4   uxCollapse>
5 template>

 1 

效果

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

复杂效果实现

同一页面窗口放大时效果