用 Vue3 + TypeScript 搭建优雅的手风琴组件

2023-09-07 17:25:47

手风琴组件，让您的网站更添优雅！

手风琴组件是现代前端开发中常用的可交互元素，以其整洁的页面布局和直观的用户体验而备受欢迎。今天，我们将向您展示如何利用强大的 Vue3 和 TypeScript 组合，快速搭建一个美观实用的手风琴组件。

Vue3 + TypeScript 搭建手风琴组件：深入指南

手风琴组件是一个包含多个折叠/展开内容的交互式元素，可以动态显示和隐藏这些内容。它非常适合用于创建 FAQ（常见问题解答）、产品介绍、技术文档等。

构建手风琴组件的步骤

初始化 Vue3 项目

使用 Vue CLI 或类似工具初始化一个新的 Vue3 项目。
创建手风琴组件

在组件目录中创建名为 Accordion.vue 的新文件，并添加以下代码：

<template>
  <div class="accordion">
    <div class="accordion-item" v-for="item in items" :key="item.id">
      <button class="accordion-title" @click="toggleItem(item.id)">{{ item.title }}</button>
      <div class="accordion-content" v-show="item.isOpen">{{ item.content }}</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const state = reactive({
      openItems: []
    });

    const toggleItem = (id) => {
      const index = state.openItems.indexOf(id);
      if (index > -1) {
        state.openItems.splice(index, 1);
      } else {
        state.openItems.push(id);
      }
    };

    return {
      state,
      toggleItem
    };
  }
});
</script>

<style>
.accordion {
  width: 100%;
}

.accordion-item {
  border: 1px solid #eee;
  margin-bottom: 10px;
}

.accordion-title {
  padding: 10px;
  background-color: #f7f7f7;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  display: none;
}

.accordion-content.open {
  display: block;
}
</style>

在 main.js 文件中注册组件

在 main.js 文件中，将 Accordion 组件注册为全局组件：

import Accordion from './components/Accordion.vue';

Vue.component('Accordion', Accordion);

在模板中使用组件

在模板中，您可以通过以下方式使用 Accordion 组件：

<template>
  <div id="app">
    <Accordion :items="items" />
  </div>
</template>

<script>
import Accordion from './components/Accordion.vue';

export default {
  components: {
    Accordion
  },
  data() {
    return {
      items: [
        { id: 1, title: 'Question 1', content: 'Answer 1' },
        { id: 2, title: 'Question 2', content: 'Answer 2' },
        { id: 3, title: 'Question 3', content: 'Answer 3' }
      ]
    };
  }
};
</script>