Vue を使用してセグメント化された選択コンポーネントを実装するにはどうすればよいですか?-Vue.js-php.cn

Vue を使用してセグメント化された選択コンポーネントを実装するにはどうすればよいですか?

WBOY

リリース： 2023-06-25 11:53:42

オリジナル

1021 人が閲覧しました

Vue は現在最も人気のあるフロントエンド開発フレームワークの 1 つであり、データバインディング、コンポーネント化、応答性など、多くの効率的で使いやすい機能を備えています。セグメント選択は、ユーザーが 1 つ以上のセグメントを選択できるようにする一般的な UI コンポーネントであり、通常、クエリ条件、ラベルフィルタリング、データフィルタリングなどのシナリオで使用されます。この記事では、Vue を使用してセグメント化された選択コンポーネントを実装する方法を紹介します。

準備作業

始める前に、次のファイルを準備する必要があります:

index.html: Vue の概要が含まれています。およびコンポーネントコードをハングします
Segment.vue: セグメント選択コンポーネントのコード

次のコードをindex.html ファイルに追加します:

<!DOCTYPE html>
<html>
  <head>
    <title>Segment Selector Component</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script src="app.js"></script>
  </body>
</html>

ログイン後にコピー

ここでは、Vue A グローバルビルド 3.0 を使用し、ページに導入しました。コンポーネントをマウントするために app.js という名前のスクリプトも導入されています。

次に、app.js ファイルを作成し、次のコードを追加します:

import Segment from './Segment.vue';

const app = Vue.createApp({});
app.component('Segment', Segment);
app.mount('#app');

ログイン後にコピー

ここでは、Vue 3.0 API を使用して空のアプリケーションインスタンスを作成し、Segment という名前のコンポーネントを登録し、マウントします。 ID app を持つ DOM 要素に。同時に、セグメント選択コンポーネントのコードを実装するために、Segment.vue という名前のファイルを作成する必要もあります。

セグメント選択コンポーネントの実装

Segment.vue ファイルに、Segment という名前のコンポーネントを実装します。 data、selectedIndex、multiSelect の 3 つのプロパティを追加する必要があります。 data はセグメント化されたデータソース、selectedIndeX は現在選択されているセグメント化されたインデックス、multiSelect は複数選択モードを有効にするかどうかを示します。同時に、セグメント化されたクリックイベントを処理するために、コンポーネント内でメソッド handleSegmentClick を定義する必要があります。

<template>
  <div class="segment-container">
    <div
      v-for="(segment, index) in data"
      :key="index"
      :class="{
        'segment': true,
        'segment-active': multiSelect ?
          selectedIndex.includes(index) :
          selectedIndex === index
      }"
      @click="handleSegmentClick(index)"
    >
      {{ segment }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Segment',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    selectedIndex: {
      type: [Number, Array],
      default: -1
    },
    multiSelect: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleSegmentClick(index) {
      let selected = this.selectedIndex;

      if (this.multiSelect) {
        selected = (Array.isArray(selected)) ? selected : [];
        if (selected.includes(index)) {
          selected.splice(selected.indexOf(index), 1);
        } else {
          selected.push(index);
        }
      } else {
        selected = index === selected ? -1 : index;
      }

      this.$emit('update:selectedIndex', selected);
    }
  }
};
</script>

ログイン後にコピー

テンプレートパーツでは、v-for を使用してデータソース内の各セグメントを走査し、スタイルバインディング命令を通じて選択したセグメントにアクティブなスタイルを追加します。同時にイベントを @click でバインドすることで、セグメント化されたクリックイベント処理を実装します。

スクリプトセクションでは、セグメント化されたクリックイベントを処理するために handleSegmentClick という名前のメソッドを定義します。この方法では、まず現在選択されているセグメントを取得し、複数選択モードかどうかに応じて異なる処理を実行します。具体的には、複数選択モードでは、選択された状態を配列 selected に保存し、セグメントが選択されると、現在のセグメントのインデックスを selected に追加し、そうでない場合はセグメントのインデックスを selected から削除します。ラジオ選択モードでは、選択されたセグメントのインデックスのみが selected に保存され、クリックされたセグメントが既に選択されている場合、選択状態はクリアされます。

最後に、更新された選択状態を this.$emit を通じて親コンポーネントに返します。そして、handleSegmentClick メソッドをテンプレート内の @click イベントにバインドします。

セグメント選択コンポーネントの使用

index.html ファイルで、segmentData という名前の配列型の変数を作成し、渡されるコンポーネントの小道具としてそれを使用します。セグメントコンポーネントに。

<div id="app">
  <Segment
    :data="segmentData"
    :selected-index.sync="selectedIndex"
    :multi-select="multiSelect"
  />
</div>

ログイン後にコピー

ご覧のとおり、data、selectedIndex、multiSelect の 3 つのプロパティを構成しました。selectedIndex は、.sync 修飾子を使用して双方向のデータバインディングをサポートします。

次に、データの初期化と関連処理のために app.js に次のコードを追加します。

import Segment from './Segment.vue';

const app = Vue.createApp({
  data() {
    return {
      segmentData: ['Web Development', 'Data Science', 'Mobile Development'],
      selectedIndex: 0,
      multiSelect: false
    };
  },
  methods: {
    toggleSelection() {
      this.multiSelect = !this.multiSelect;
      this.selectedIndex = this.multiSelect ? [0, 2] : 0;
    }
  }
});

app.component('Segment', Segment);

app.mount('#app');

ログイン後にコピー

データメソッドで、segmentData、selectedIndex、multiSelect の 3 つの変数を初期化します。 segmentData は選択する必要があるセグメントデータソースであり、selectedIndex は現在選択されているセグメントインデックスを記録するために使用され、multiSelect はセグメント選択で複数選択モードが有効かどうかを示します。

メソッドでは、toggleSelection というメソッドを定義します。このメソッドでは、multiSelect の値を切り替え、その状態に応じて selectedIndex の値を設定します。具体的には、 multiSelect が true の場合、 selectedIndex を [0, 2] に設定して、最初と 3 番目のセグメントが選択されていることを示します。そうでない場合は、 selectedIndex を 0 に設定して、最初のセグメントが選択されていることを示します。

概要

この記事では、Vue を使用してセグメント化された選択コンポーネントを実装する方法を紹介しました。このコンポーネントは、クエリ条件、ラベルフィルタリング、データフィルタリングなどのさまざまなシナリオで使用できる一般的な UI コンポーネントです。この記事の紹介を通じて、読者は Vue を使用してデータバインディング、コンポーネント化、応答性などの重要な機能を実装する方法を学び、Vue の理解と使用を深められます。

以上がVue を使用してセグメント化された選択コンポーネントを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。