vue3手风琴

最新推荐文章于 2025-06-05 08:10:47 发布

原创

最新推荐文章于 2025-06-05 08:10:47 发布 · 492 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

该文章描述了一个使用Vue.js实现的折叠内容组件。组件基于flex布局，利用CSS过渡效果实现内容推拉动画。每个项目包含标题和内容两部分，内容区域默认隐藏，点击标题显示。组件支持动态内容，使用插槽进行自定义，并提供了当前显示项的属性和方法。

结构搭建

搭建结构主要实现盒子间的排列效果。

用flex布局或者其他布局方式将内容在一行排列

把每一项的内容和项头用盒子包裹，内容就是这一项要展示的内容（content-box）,项头就是可以点击显示这一项的盒子（title-box）。

默认第一项的context-box显示，即有宽度，其他项的content-box宽度为0.

content-box加上过渡样式，这样就会有推拉的感觉。

由于是vue组件，那我们可以给它加上插槽，让组件可以自定义显示内容

功能搭建

点击项头显示点击项的内容区域。由于我们已经将未显示的content-box宽度设为0，所以只需要添加一个变量将带有宽度的类样式赋给当前点击项即可显示。

宽度变化时，里面的内容样式可

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

irisMoon06

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【推拉框-手风琴】vue3实现手风琴效果的组件

qq_2511276124的博客

03-03

4777

在工作时有时会用到竖形手风琴效果的组件。在此记录下实现代码和实现思路。

手风琴效果（vue实现）

2301_76232361的博客

04-23

469

循环数据在点击调用changeli方法时将当前索引和本条数据传进去,并使用当前数据show的bool值添加或移除样式。判断当前这条数据的bool值如果是true就打开二级菜单,如果是false就关闭二级菜单。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。效果图：再点击时候只打开点击哪个的列表，其他的关闭。循环二级菜单数据并使用.stop阻止冒泡。toggle() 方法切换元素的可见状态。在这里打印出boll值方便查看。

参与评论您还未登录，请先登录后发表或查看评论

蓝桥杯Web练习题：【功能实现】折叠手风琴

雨落宿命敲的博客

04-01

1037

【功能实现】折叠手风琴 背景介绍本次挑战需要实现图片折叠的效果，请使用 jQuery 语法完成代码。步骤准备在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。 wget https://labfile.oss.aliyuncs.com/courses/7835/exam03-imi.zip && unzip exam03-imi.zip && mv exam03-imi/* ./ && rm -rf exam03-imi* 下载

vue3.0实现自定义手风琴

qq_41716992的博客

09-05

958

vue3.0实现自定义手风琴

vue3折叠面板（手风琴）展开与收起过渡效果

qq_41347620的博客

09-04

915

一开始做这个过渡效果的时候，会想到通过控制元素高度来实现假如元素高度为0，点击面板时高度设置为auto;但是试过以后发现无效；因为transition属性只针对数值类的值生效，auto并不是数值类。

vue手风琴三种方式

03-07

vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴vue手风琴

vue-collapsible-panel:使用Vue3的可折叠面板手风琴组件

03-22

使用Vue3构建的易于使用，可定制的可折叠面板/手风琴库。安装使用yarn或npm将软件包安装为项目依赖项： $ yarn add @dafcoe/vue-collapsible-panel --- or --- $ npm install --save @dafcoe/vue-collapsible-...

一个vue的手风琴组件

08-10

Vue.js 是一款轻量级的前端JavaScript框架，以其易学易用、高性能...了解并使用这个Vue手风琴组件，开发者可以提升其Vue项目中的用户体验，通过自定义样式适应各种场景，同时利用Vue的强大功能实现高效、可维护的代码。

横向手风琴组件 vue3

szzlh123456789的博客

05-09

290

横向手风琴组件代码，包含默认展开、自动轮播和鼠标交互功能。

vue--横向切换手风琴动画效果demo + div悬浮感(hover属性触发)

m0_49515138的博客

12-13

856

可以给img 添加hover属性。

vue3-accessible-accordion

05-07

Vue3无障碍手风琴 一个适用于Vue 3的简单手风琴组件插件。该插件遵循的“ 可自动在插件中内置可访问性最佳实践。安装 npm i vue3-accessible-accordions 或者 yarn add vue3-acccessible-accordions 注册为全局组件 import { createApp } from 'vue' ; import App from './App.vue' import vue3_accessible_accordions from 'vue3-accessible-accordions' ; const app = createApp ( App ) . use ( vue3_accessible_accordions ) ; . mount ( '#app' ) 分别注册组件 import Accordion , Accor

vue-accordion:Vue.js中的手风琴和过滤器

05-16

视图手风琴 Vue.js中的手风琴和过滤器

vueaccordionmenuVue2中简单的手风琴菜单组件

08-10

vue-accordion-menu

vue怎么实现手风琴效果_Vue动画实现简易手风琴组件

weixin_32972053的博客

12-23

1483

1.需求描述最近做Vue项目有个需求，用手风琴效果实现对企业信息的展示，具体是在鼠标移入时，图片拉伸放大，其中包含标题及简述的浮现，流畅度要高。经过一番思考研究终于完成了，下面上代码。2.代码部分v-show="!show"class="box":class="eleindex == i ? 'eleactive' : ''"v-for="(ele, i) in piclist":key="i"@...

3 手风琴翻折效果_vue3+typeScript 手风琴(每周一个小组件)

weixin_39736934的博客

12-31

254

每周一个小组件前言实现功能：带切换动画效果的手风琴 每周分享一个vue3+typeScript的小组件，我只想分享下自己的实现思路，楼主是个菜鸡前端，记录下实现过程，说不定对你有帮助。效果展示预览地址github地址开发过程思路：点击手风琴标题传入它的索引,定义一个参数来接收点击的索引，这个参数等于索引就显示手风琴内容。自定义内容可以根据索引来动态显示。html部分 class="acc...

Vue 手风琴实现的三种常用方式及长尾关键词解析

最新发布

sinat_37775891的博客

06-05

991

本文介绍了三种在Vue中实现手风琴效果的方法：1）原生Vue实现，通过数据绑定和条件渲染控制展开/收起状态；2）使用Vue组件库（如Element-UI）的现成组件快速搭建；3）通过自定义指令操作DOM元素实现。每种方法都附有代码示例和应用场景说明，原生实现灵活定制，组件库简单高效，自定义指令适合特定需求。手风琴效果可有效节省页面空间，提升用户体验，适用于产品特性展示、后台菜单导航、FAQ页面等场景。

手风琴效果（vue实现），【无偿分享】

2401_84092694的博客

04-06

656

Vue组件嵌套制作手风琴问题

m0_62763606的博客

07-09

353

current赋值为当前类名为title的节点，这保证了每个子组件中有了独一无二的标签。但如果没有完整数据，那么直接在父组件下写入子组件是比较方便的做法，此时问题的核心就成了如何为几个相同结构的子组件添加不同的标签来加以鉴别，从而完成每个子组件的单击事件并完成父组件传来的默认打开功能。该代码中添加类时所进行的逻辑判定中有两个变量，current和currentClick，前者是每个组件进行区分所用的自定义标签，currentClick是当前点击的标题，意思是当点击的标题和当前的标题相同时则展开内容。

gitblog_00056的博客

06-04

651

vue3手风琴式弹窗

03-08

### Vue3 实现手风琴式弹窗组件在构建基于 Vue3 的手风琴式弹窗组件时，可以利用 Vue3 提供的组合 API 和响应式特性来简化开发过程。下面是一个简单的实现方案。 #### 创建基础结构首先定义一个名为 `Accordion` 的组件： ```html <template> <div class="accordion"> <div v-for="(item, index) in items" :key="index" @click="toggle(index)"> <header>{{ item.title }}</header> <transition name="fade"> <section v-if="activeIndex === index">{{ item.content }}</section> </transition> </div> </div> </template> <script setup> import { ref } from 'vue'; const props = defineProps({ items: { type: Array, required: true } }); let activeIndex = ref(null); function toggle(index) { if (activeIndex.value === index) { activeIndex.value = null; } else { activeIndex.value = index; } } </script> <style scoped> .fade-enter-active, .fade-leave-active { transition: max-height 0.3s ease-out; } .fade-enter-from, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { max-height: 0; } .fade-enter-to, .fade-leave-from { max-height: 50px; /* Adjust based on content */ } </style> ``` 此代码片段展示了如何创建一个基本的手风琴组件[^1]。通过点击标题部分展开或折叠对应的面板内容，并应用了一个简单的 CSS 过渡动画以增强用户体验。为了使该组件更加实用，在实际项目中可能还需要考虑更多细节，比如支持多级嵌套、自定义样式以及与其他 UI 库集成等功能扩展。 #### 使用示例要在页面上使用这个手风琴组件，只需将其导入并传递适当的数据即可： ```html <template> <div id="app"> <Accordion :items="data"/> </div> </template> <script setup> import Accordion from './components/Accordion.vue'; import { reactive } from 'vue'; // 示例数据 const data = reactive([ { title: 'Section One', content: 'Content of section one.' }, { title: 'Section Two', content: 'Content of section two.' }, { title: 'Section Three', content: 'Content of section three.' } ]); </script> ``` 上述例子说明了如何配置和初始化手风琴组件及其所需的内容项数组。