Vue.jsで再利用可能なアコーディオンのコンポーネントを実装する方法を解説

サイト構築 -JavaScript

Post on:2021年11月9日

はじめに

Vue.jsのコンポーネントに関するHow to記事は今回で4回目となりますが、最もよく読まれているのはチュートリアル記事で、具体的に使用できるものをすぐに実装することができるだと思います。

この記事では、私がプロジェクトで最もよく使用するコンポーネントの1つ、アコーディオンを解説することにしました。

アコーディオンのコンポーネントは非常に便利で、Bootstrapなど多くのライブラリにも使用されています。
さっそく実装してみましょう！

アコーディオンの実装

このチュートリアルでは、アコーディオンの機能に必要なもの以外のスタイルは使用しません。さまざまなプロジェクトで簡単に利用できるように、非常にシンプルなデザインです。

基本的なスタイルにはTailwind CSSを使用していますが、お好みのCSSを自由に使用してください。デモは、下記ページからご覧ください。

デモページ

ではコードを解説します。

<template>
  <div>
    <button @click="toggleAccordion()" class="flex items-center space-x-3">
      <slot name="title" />
      
      <svg
        class="w-3 transition-all duration-200 transform"
        :class="{
          'rotate-180': isOpen,
          'rotate-0': !isOpen,
        }"
        fill="none"
        stroke="currentColor"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 10"
      >
        <path
          d="M15 1.2l-7 7-7-7"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </button>
    <div
      class="transition-all duration-400 overflow-hidden"
      :class="{
        'max-h-96': isOpen,
        'max-h-0': !isOpen,
      }"
    >
      <slot name="content" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    toggleAccordion() {
      this.isOpen = !this.isOpen;
    },
  },
};
</script>

<div>

<svg

class="w-3 transition-all duration-200 transform"

:class="{

'rotate-180': isOpen,

'rotate-0': !isOpen,

fill="none"

stroke="currentColor"

xmlns="http://www.w3.org/2000/svg"

viewBox="0 0 16 10"

<path

d="M15 1.2l-7 7-7-7"

stroke-width="2"

stroke-linecap="round"

stroke-linejoin="round"

</svg>

</button>

<div

class="transition-all duration-400 overflow-hidden"

:class="{

'max-h-96': isOpen,

'max-h-0': !isOpen,

</div>

</template>

export default {

data() {

return {

isOpen: false,

};

methods: {

toggleAccordion() {

this.isOpen = !this.isOpen;

};

</script>

上記のコードを解説します。

データとメソッド

data isActiveの値を変更するmethodを使用しています。この値に基づいてCSSのクラスを動的に追加または削除して、コンポーネントにコンテンツを表示または非表示にすることができます。

名前付きSlots

もう一つの注意点はnamed slotsを使用してコンテンツをコンポーネントに追加する方法です。これによりHTMLを含むあらゆるタイプのコンテンツを追加することができ、柔軟性があります。

named slots（名前付きSlots）の詳細については、下記をご覧ください

The Difference Between Props, Slots and Scoped Slots in Vue.js
翻訳版: Vue.jsでSlotsの代わりにPropsを使用する理由、名前付きSlotsやスコープ付きSlotsとの違いについて解説

アコーディオンのコンポーネントの使用方法

<app-accordion class="mb-4">
  <template v-slot:title>
    <span class="font-semibold text-xl">Accordion 1</span>
  </template>
  <template v-slot:content>
    <p><b>Lorem</b>, ipsum dolor sit amet consectetur adipisicing elit. Quia, porro. Non a excepturi, voluptatibus ipsam magnam, eligendi, accusantium ipsa quae quis praesentium voluptate saepe ullam sint ea itaque consectetur impedit?</p>
  </template>
</app-accordion>

<app-accordion class="mb-4">

<span class="font-semibold text-xl">Accordion 1</span>

</template>

<p><b>Lorem</b>, ipsum dolor sit amet consectetur adipisicing elit. Quia, porro. Non a excepturi, voluptatibus ipsam magnam, eligendi, accusantium ipsa quae quis praesentium voluptate saepe ullam sint ea itaque consectetur impedit?</p>

</template>

</app-accordion>

このコンポーネントを使用するには、上記のようにnamed slotsにコンテンツを挿入してインポートします。再利用は非常に簡単で、titleとcontentnamed slotsを使用して好きなコンテンツを追加できるコンポーネントを実装しています。

このコンポーネントは自由にカスタマイズできます。下記のデモページで、お好みに合わせてカスタマイズしてみてください。

デモページ