每周一个小组件
前言
实现性能：带切换动画成果的手风琴
每周分享一个vue3+typeScript的小组件，我只想分享下本人的实现思路，楼主是个菜鸡前端，记录下实现过程，说不定对你有帮忙。
成果展现
预览地址
github地址
开发过程
思路：点击手风琴题目传入它的索引,定义一个参数来接管点击的索引，这个参数等于索引就显示手风琴内容。自定义内容能够依据索引来动态显示。
html局部
<div class="accordion"> <div v-for="(vo,inx) in items" :key="inx"> <!-- 手风琴题目 --> <div class="item" @click="changeItem(vo,inx)"> {{vo.title}} </div> <!-- 手风琴内容 --> <div class="content" v-show="active==inx&&vo.show"> {{vo.content}} <!-- 能够自定义内容构造 --> <div v-if="inx===0"> 我是自定义内容1 </div> <div v-if="inx===1"> 我是自定义内容2 </div> <div v-if="inx===2"> 我是自定义内容3 </div> </div> </div></div>ts局部
<script lang="ts">import { defineComponent, reactive, toRefs} from 'vue'export default defineComponent({ setup() { const data = reactive({ items: [{ title: "JavaScript", content: "这是内容1", show: true }, { title: "Java", content: "这是内容2", show: true }, { title: "C++", content: "这是内容3", show: true } ], active: 0, changeItem: (vo: any, inx: number) => { //如果反复点击一个栏目item 能够敞开和关上以后栏目手风琴内容 if (inx === data.active) { vo.show = !vo.show } else { vo.show = true } data.active = inx } }) return { ...toRefs(data) } }})</script>css局部
.accordion { width: 800px; padding: 50px 20px; background: #ecf0f3; height: 600px; .item { text-align: center; line-height: 80px; margin: 0 auto; width: 600px; height: 80px; border-radius: 12px; box-shadow: inset 12px 12px 20px #d1d9e6, inset -12px -12px 20px #fff; cursor: pointer; margin-bottom: 5px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .content { opacity: 0; min-height: 80px; width: 600px; margin: 0 auto; animation-name: fadeIn; animation-duration: 1s; animation-fill-mode: both; }}vue3继续更新中...