VUE3 開発の基本: Vue.js プラグインを使用して折りたたみパネル コンポーネントをカプセル化する

VUE3 開発の基本: Vue.js プラグインを使用して折りたたみパネル コンポーネントをカプセル化する

折りたたみパネルは、コンテンツの展開と折りたたみに使用できる一般的な UI コンポーネントです。 Vue.js では、ディレクティブまたはコンポーネントを使用してアコーディオン パネルを実装できます。ただし、重複コンポーネントの開発は面倒な作業であるため、Vue.js プラグインを使用してアコーディオン パネル コンポーネントをカプセル化する方が良い解決策です。

この記事では、Vue.js プラグインを使用して折りたたみパネル コンポーネントをカプセル化する方法 (プラグインのインストール、使用、構成など) を紹介します。開発環境として Vue3 を使用し、ビルド ツールとして Vite を使用します。

ステップ 1: プロジェクトの作成と Vue.js のインストール

まず、新しい Vue.js プロジェクトを作成する必要があります。次のコマンドを入力します。

npm init vite-app vue3-fold-panel

これにより、次のコマンドが作成されます。 a 新しい Vite プロジェクトを作成し、「vue3-fold-panel」という名前を付けます。

次に、Vue.js をインストールする必要があります。次のコマンドを使用してインストールできます:

npm install vue@next

インストールが完了したら、プロジェクトに新しい Vue インスタンスを作成できます:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

ステップ 2: 折りたたみパネル コンポーネントを作成する

アコーディオン コンポーネントのパッケージ化を開始する前に、まずコンポーネントを定義する必要があります。 src/components ディレクトリに新しいフォルダーを作成し、「FoldPanel」という名前を付けます。フォルダー内に「FoldPanel.vue」という名前のファイルを作成し、次のコードを記述します:

<template>
  <div class="fold-panel">
    <div class="fold-panel-header" @click="togglePanel"> {{ title }} </div>
    <div class="fold-panel-body" v-show="showPanel">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FoldPanel',
  data() {
    return {
      showPanel: false,
    }
  },
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  methods: {
    togglePanel() {
      this.showPanel = !this.showPanel
    },
  },
}
</script>

<style scoped>
.fold-panel {
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.fold-panel-header {
  padding: 10px;
  cursor: pointer;
}

.fold-panel-body {
  padding: 10px;
}
</style>

このコンポーネントでは、Vue3 の新機能「」を使用します。これにより、コンテンツを挿入できます。内部コンポーネント。アコーディオン コンポーネントは、タイトルとコンテンツの 2 つの部分で構成されます。ユーザーがタイトルをクリックすると、コンテンツ セクションを折りたたんだり展開したりできます。

コンテンツ部分の展開状態と折りたたみ状態を切り替える「togglePanel」というメソッドを定義します。また、コンテンツ部分を表示するかどうかを記録する「showPanel」変数も定義します。

ステップ 3: プラグインを作成してコンポーネントを登録する

次に、アコーディオン コンポーネントをグローバルに登録するプラグインを作成します。

src/plugins ディレクトリに、「fold-panel.js」という名前のファイルを作成し、次のコードを記述します。

import FoldPanel from '../components/FoldPanel/FoldPanel.vue'

export default {
  install(app) {
    app.component(FoldPanel.name, FoldPanel)
  },
  FoldPanel,
}

このプラグインには、グローバルに登録するメソッドのみが含まれています。折りたたみパネル。 「app.component」関数を使用して、コンポーネントを Vue インスタンスに登録します。このプラグインは「FoldPanel」という名前のオブジェクトも返します。これにより、コンポーネント内で「import { FoldPanel } from 'fold-panel'」を使用してコンポーネントをインポートできます。

ステップ 4: Vue.js にプラグインをインストールする

これで、プラグインを Vue.js アプリケーションにインストールできます。 src/main.js ファイルを開き、次のコードを使用してプラグインをインストールします。

import { createApp } from 'vue'
import App from './App.vue'
import FoldPanelPlugin from './plugins/fold-panel'

const app = createApp(App)

app.use(FoldPanelPlugin)

app.mount('#app')

プラグインのインストールには Vue.js 3 の新しい API「app.use」を使用したことに注意してください。

ステップ 5: アコーディオン パネル コンポーネントを使用する

これで、任意の Vue コンポーネントでアコーディオン パネル コンポーネントを使用できるようになります。次のコードをテンプレートに挿入するだけです:

<template>
  <div>
    <fold-panel title="折叠面板1">
      这是折叠面板1的内容。
    </fold-panel>

    <fold-panel title="折叠面板2">
      这是折叠面板2的内容。
    </fold-panel>
  </div>
</template>

<script>
import { FoldPanel } from 'fold-panel'

export default {
  components: {
    FoldPanel,
  },
}
</script>

これにより、ページ上に 2 つのアコーディオン パネルが表示され、それぞれにタイトルとコンテンツ セクションが含まれます。ユーザーがパネル タイトルをクリックすると、コンテンツ セクションが展開または折りたたまれます。

ステップ 6: コンポーネントを構成する

折りたたみ可能なパネル コンポーネントは、プロパティを通じてカスタマイズすることもできます。主なプロパティをいくつか示します:

1. title: 折りたたみパネルのタイトル。
2. isCollapsed: 折りたたみパネルが最初に折りたたまれているかどうかを指定します。デフォルトは false (つまり、展開された状態) です。

<template>
  <div>
    <fold-panel title="折叠面板1" :isCollapsed="true">
      这是折叠面板1的内容。
    </fold-panel>

    <fold-panel title="折叠面板2">
      这是折叠面板2的内容。
    </fold-panel>
  </div>
</template>

この例では、最初は「パネル 1 を折りたたむ」が折りたたまれています。このプロパティは、初期化中にテンプレートを通じて設定できます。

3. showIcon: 展開/折りたたみアイコンを表示するかどうかを指定します。デフォルトは true です。

<template>
  <div>
    <fold-panel title="折叠面板1" :showIcon="false">
      这是折叠面板1的内容。
    </fold-panel>

    <fold-panel title="折叠面板2">
      这是折叠面板2的内容。
    </fold-panel>
  </div>
</template>

この例では、「パネルを折りたたむ 1」には展開/折りたたみアイコンが表示されません。

4. iconPosition: 展開/折りたたみアイコンの位置を指定します。デフォルトは「left」、つまり左側です。

<template>
  <div>
    <fold-panel title="折叠面板1" iconPosition="right">
      这是折叠面板1的内容。
    </fold-panel>

    <fold-panel title="折叠面板2">
      这是折叠面板2的内容。
    </fold-panel>
  </div>
</template>

この例では、「パネル折りたたみ 1」の展開・折りたたみアイコンが右側に表示されます。

この時点で、折りたたみパネル コンポーネントはカプセル化されています。 Vue.js プラグインを使用してコンポーネントをカプセル化すると、重複コードが削減されるだけでなく、コードがよりモジュール化され、拡張可能になります。

以上がVUE3 開発の基本: Vue.js プラグインを使用して折りたたみパネル コンポーネントをカプセル化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。