折叠面板组件的设计与实现

前言

NutUI，大家应该不陌生吧 [鬼脸]，前端开发的同学肯定是有些了解的。NutUI 是一个京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用。

目前 NutUI 拥有 70+ 组件，支持按需引用，支持 TypeScript，支持定制主题等功能，当然也支持最新的 Vue3 语法，在开发上能有效帮助研发人员提升效率，改善开发体验。

言归正传，今天我们一起了解 NutUI 中折叠面板 Collapse 的实现与设计，以及在开发过程中学习到的新知识点。

折叠面板设计

其实折叠面板组件无论是在 PC 还是 M ，都是比较常见的组件，顾名思义就是可以折叠/展开的内容区域。使用场景也比较广泛，例如导航、文字类详情、筛选分类等；

在组件开发阶段，我们通常都会进行对比分析，取长补短。所以我们简单通过功能上的对比来入组件的开发。

折叠面板	vant	antd	tdesign	elementui	varlet	vuetify	naiveui	iview	balam	nutui
内容展开收起	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓
动画效果	✓	✓	✓	✓	✓	✓	✓	✗	✗	✓
手风琴模式	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓
折叠图标icon	✓	✓	✓	✗	✓	✓	✗	✗	✓	✓
折叠图标color	✓	✗	✗	✗	✓	✓	✗	✗	✗	✓
折叠图标size	✓	✗	✗	✗	✗	✗	✗	✗	✗	✓
标题图标位置	✓	✓	✗	✓	✗	✓	✓	✗	✗	✓
旋转角度	✗	✗	✗	✗	✗	✗	✗	✗	✗	✓
副标题	✓	✓	✓	✓	✓	✗	✓	✗	✗	✓
支持禁用模式	✓	✓	✓	✓	✓	✓	✗	✗	✗	✓
可设置固定内容	✗	✗	✗	✗	✗	✗	✗	✗	✗	✓

组件的本质就是提升开发效率的，我们通过对业务场景的解构和组合配置方式实现业务需求。好比组件库是一个工具箱，每个组件就是箱子里的扳手、钳子等工具，为业务场景提供各种工具，如何去打造一个合适趁手的工具干活，就需要我们对平时的业务开发有所了解和思考。

让我们一起来探索吧~

实现展开收起

组件的基本交互已经明了，那我们的标题和内容的布局方式就比较简单了。现在我们需要去完成交互的开发，也就是展开折叠的功能。

 

 

实现展开折叠的功能其实很简单，就是通过一个变量控制内容的展示隐藏就可以了，不用考虑其他因素的情况下，这种方法的确是最高效的方式。

<template>
  <div class="container">
    <div class="title" @click="handle">
      标题
    </div>
    <div class="content" v-show="show">
      测试内容测试内容测试内容测试内容测试内容测试内容
    </div>
  </div>
</template>
<script setup lang="ts">
    import {
    ref } from 'vue';
    const show = ref(false);
    const handle = () => {
   
      show.value = !show.value;
    }
</script>

但是采用这种方式可能对我们后期的功能扩展和交互效果不太友好。所以我是方案是通过改变折叠内容的 height 的方式实现的，当然实现这个方法也比较好理解。

我们主要处理 content 的内容，对于这块样式我们对它的 height 默认是 0，也就是内容是折起的状态。因为每个折叠内容是无法确定的，所以我们需要动态计算内容填充后的高度，这种方式也算是一种适配方案。

我动态计算的目的是为了实现后面动画效果，提升用户体验感。我利用的是 height + transform 的方式实现的，同时使用 css 的属性 will-change 对动画效果进行优化。

will-change 为 web 开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。

// 组件部分核心代码
const wrapperRefEle: any = wrapperRef.value;
const contentRefEle: any