vue3+typeScript 手风琴(每周一个小组件)

每周一个小组件

前言

实现功能：带切换动画效果的手风琴
每周分享一个vue3+typeScript的小组件，我只想分享下自己的实现思路，楼主是个菜鸡前端，记录下实现过程，说不定对你有帮助。

效果展示

预览地址

github地址

开发过程

思路：点击手风琴标题传入它的索引,定义一个参数来接收点击的索引，这个参数等于索引就显示手风琴内容。自定义内容可以根据索引来动态显示。

html部分

    

        
        

            {{vo.title}}
        
        
        

            {{vo.content}}
            
            

                我是自定义内容1
            
            

                我是自定义内容2
            
            

                我是自定义内容3
            
        
    

ts部分

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持续更新中...