【Nova UI】十八、打造组件库之折叠组件（上）：基本介绍、设计思路与实践

最新推荐文章于 2025-05-14 23:42:16 发布

拖孩

最新推荐文章于 2025-05-14 23:42:16 发布

阅读量632

点赞数 23

分类专栏： Nova UI 文章标签： ui vue.js javascript 前端 css scss UI组件库

本文链接：https://blog.csdn.net/qq_40230003/article/details/147889147

版权

Nova UI 专栏收录该内容

19 篇文章

订阅专栏

序言

在之前的滚动条组件开发系列文章中，我们已经逐步深入地探讨了从基础功能的搭建，到各种交互功能的实现，如滑块的计算、拖动滑块与滚动区域的交互等，为大家展现了如何构建一个功能丰富且用户体验良好的滚动条组件。不过，组件开发的旅程还在继续哦 🌟，我们将在本篇文章中开启一个新的篇章 —— 折叠组件的开发啦 🏗️。

折叠组件的简介

折叠组件在现代 Web 开发中是一种非常常见且实用的组件 👍。它可以帮助我们有效地管理和组织页面内容，在节省页面空间的同时，为用户提供清晰的信息结构和良好的交互体验。通过折叠和展开的操作，用户可以根据自己的需求选择查看或隐藏部分内容，这样就能使页面更加简洁和有序 🌐。

在开发折叠组件的过程中，我们会面临一些独特的挑战，包括如何实现流畅的折叠动画、如何兼容各种场景等。不过，别担心 👌，在接下来的内容中，我们会一步步详细讲解如何克服这些挑战，从设计思路到具体实现，带你打造一个实用且美观的折叠组件 🌈。

Transition

Vue 提供了 Transition 内置组件，它可以帮助我们制作基于状态变化的过渡和动画哦 🔄。这个组件是由 v-if、v-show、<component> 切换的动态组件、改变特殊的 key 属性所触发的切换。它有六个过渡 class：

enter-from: 进入动画的起始状态。
enter-active: 进入动画的生效状态。
enter-to: 进入动画的结束状态。
leave-from: 离开动画的起始状态。
leave-active: 离开动画的生效状态。
leave-to: 离开动画的结束状态。

我们还可以通过监听 Transition 组件事件的方式在过渡过程中挂上钩子函数：

before-enter: 在元素被插入到 DOM 之前被调用，用这个来设置元素的 “enter-from” 状态。
enter: 在元素被插入到 DOM 之后的下一帧被调用，用这个来开始进入动画。
after-enter: 当进入过渡完成时调用。
enter-cancelled: 当进入过渡在完成之前被取消时调用。
before-leave: 在 leave 钩子之前调用。
leave: 在离开过渡开始时调用，用这个来开始离开动画。
after-leave: 在离开过渡完成且元素已从 DOM 中移除时调用。
leave-cancelled: 当离开过渡完成之前被取消时调用，仅在 v-show 过渡中可用。

对于 Transition 组件，其核心在于状态的变化。当元素进入或离开页面时，根据我们所设置的过渡名称，Vue 会自动应用相应的过渡类，我们可以在 CSS 中为这些类添加不同的样式，以此来实现动画效果哦 🌟。例如，当元素进入时，会依次应用 enter-from、enter-active 和 enter-to 类，而在离开时则会应用 leave-from、leave-active 和 leave-to 类 🔄。

基本的介绍就到此啦，其它具体的信息可以到官网上查阅 🔍。

思路

我们都知道，动画的本质是在一段时间内平滑地改变元素的一个或多个 CSS 属性值（注意是数值哦），从而产生动画效果呢 🔢。对于我们的折叠组件来说，就是一个从初始高度（0）到达预设高度变化的过程 🏃。所以呢，我们只要在元素被插入到 DOM 之前，将元素的初始高度设置为 0。然后在元素被插入到 DOM 之后，再设置元素本身的高度就可以了 🔧。

准备工作

和之前开发组件的流程类似，我们在 packages/components/collapse/src 目录下新增了 collapse.vue 文件，在该目录的上一层新增了 index.ts 文件，用来注册、导出组件，并且在 packages/theme-chalk/src 目录下新增了 collapse.scss 文件（别忘记在入口文件内导入），用来写组件的样式 📃。

<template>
  <transition :name="n.b()">
    <slot></slot>
  </transition>
</template>

<script lang="ts" setup>
import { useNamespace } from '@nova-ui/hooks';

const n = useNamespace('collapse');
defineOptions({
  name: 'NCollapse',
});
</script>

@use 'mixins' as *;
@include b(collapse) {
}

import { withInstall } from '@nova-ui/utils'
import Collapse from './src/collapse.vue'

export const NCollapse = withInstall(Collapse)
export default NCollapse

declare module 'vue' {
  export interface GlobalComponents {
    NCollapse: typeof NCollapse
  }
}

这几个文件的基本结构就是上面这样啦 👆。基本的准备工作就已经完成 🌟。

对于折叠组件，我们的核心目标是实现内容的展开和折叠功能，同时要确保动画效果的流畅性 🏆。我们将利用 Vue 的响应式数据和 Transition 组件的特性，结合 CSS 样式的变化，来实现一个完美的折叠组件 🔧。在接下来的部分，我们会详细讲解如何运用这些工具和技术，解决在开发过程中可能遇到的各种问题，为大家呈现一个优秀的折叠组件的开发过程哦 🌟。

🦀🦀感谢看官看到这里，如果觉得文章不错的话🙌，点个关注不迷路⭐。
诚邀您加入我的微信技术交流群🎉，群里都是志同道合的开发者👨‍💻，大家能一起交流分享摸鱼🐟。期待与您在群里相见🚀，咱们携手在开发路上共同进步✨ ！
👉点我

感谢各位大侠一路相伴，实在感激！不瞒您说，在下还有几个开源项目 📦，它们就像精心培育的幼苗 🌱，急需您的浇灌。要是您瞧着还不错，麻烦动动手指，给它们点亮几颗 Star ⭐，您的支持就是它们成长的最大动力，在此谢过各位大侠啦！

Nova UI组件库：https://github.com/gmingchen/nova-ui
基于 Vue3 + Element-plus 管理后台基础功能框架
预览：https://admin.gumingchen.icu
Github：https://github.com/gmingchen/agile-admin
Gitee：https://gitee.com/shychen/agile-admin
基础版后端：https://github.com/gmingchen/java-spring-boot-admin
文档：http://admin.gumingchen.icu/doc/

基于 Vue3 + Element-plus + websocket 即时聊天系统
预览：https://chatterbox.gumingchen.icu/
Github：https://github.com/gmingchen/chatterbox
Gitee：https://gitee.com/shychen/chatterbox

基于 node 开发的后端服务：https://github.com/gmingchen/node-server