关于vue3:vue3typeScript-手风琴每周一个小组件

每周一个小组件

前言

实现性能：带切换动画成果的手风琴
每周分享一个 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 继续更新中 …