Vue3+TypeScript手风琴组件：简洁易用，功能强大

2023-10-23 17:10:09

组件结构

我们的手风琴组件将由两个主要部分组成：

手风琴容器：用于容纳所有手风琴项。
手风琴项：每个手风琴项包含一个标题和一个内容区域。

2. 代码实现

在Vue3中，我们可以使用<template>标签来定义组件的模板，并使用<script>标签来定义组件的逻辑。

<template>
  <div class="accordion">
    <accordion-item v-for="item in items" :key="item.id" :title="item.title" :content="item.content" />
  </div>
</template>

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

export default defineComponent({
  name: 'Accordion',
  components: { AccordionItem },
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
});
</script>

在上面的代码中，我们首先定义了一个名为<accordion>的组件，它将作为手风琴容器。然后，我们在<template>标签中使用<accordion-item>组件来定义每个手风琴项。<accordion-item>组件是一个子组件，它将包含手风琴项的标题和内容。

在<script>标签中，我们使用defineComponent函数来定义组件的逻辑。我们首先定义了组件的名称和组件使用的子组件。然后，我们定义了组件的属性，其中items属性是一个数组，它包含了所有手风琴项的数据。

3. 子组件实现

接下来，我们需要实现AccordionItem子组件。

<template>
  <div class="accordion-item">
    <button class="accordion-title" @click="toggle">
      {{ title }}
    </button>
    <div class="accordion-content" v-show="isOpen">
      {{ content }}
    </div>
  </div>
</template>

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

export default defineComponent({
  name: 'AccordionItem',
  props: {
    title: {
      type: String,
      required: true,
    },
    content: {
      type: String,
      required: true,
    },
  },
  setup() {
    const isOpen = ref(false);

    const toggle = () => {
      isOpen.value = !isOpen.value;
    };

    return { isOpen, toggle };
  },
});
</script>

在上面的代码中，我们首先定义了一个名为<accordion-item>的组件，它将作为手风琴项。然后，我们在<template>标签中定义了组件的模板，其中包括一个按钮和一个内容区域。按钮用于切换手风琴项的展开和收起状态，内容区域用于显示手风琴项的内容。

在<script>标签中，我们使用defineComponent函数来定义组件的逻辑。我们首先定义了组件的名称和组件的属性。然后，我们使用setup函数来定义组件的逻辑，其中包括isOpen状态和toggle方法。isOpen状态用于跟踪手风琴项的展开和收起状态，toggle方法用于切换手风琴项的展开和收起状态。

4. 使用组件

现在，我们已经创建好了手风琴组件和子组件，就可以在我们的Vue应用程序中使用它们了。

<template>
  <div id="app">
    <h1>手风琴组件示例</h1>
    <accordion :items="items" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Accordion from './Accordion.vue';

export default defineComponent({
  name: 'App',
  components: { Accordion },
  setup() {
    const items = ref([
      {
        id: 1,
        title: '手风琴项 1',
        content: '手风琴项 1 的内容',
      },
      {
        id: 2,
        title: '手风琴项 2',
        content: '手风琴项 2 的内容',
      },
      {
        id: 3,
        title: '手风琴项 3',
        content: '手风琴项 3 的内容',
      },
    ]);

    return { items };
  },
});
</script>

在上面的代码中，我们首先定义了一个名为<app>的组件，它将作为我们的根组件。然后，我们在<template>标签中定义了组件的模板，其中包括一个标题和一个手风琴组件。

现在，我们就可以在我们的HTML文件中使用<app>组件了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <script src="vue.global.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>