Bagaimana untuk melaksanakan komponen pemilihan tersegmen menggunakan Vue?-View.js-php.cn

Bagaimana untuk melaksanakan komponen pemilihan tersegmen menggunakan Vue?

WBOY

Lepaskan： 2023-06-25 11:53:42

asal

1017 orang telah melayarinya

Vue ialah salah satu rangka kerja pembangunan bahagian hadapan yang paling popular hari ini, dengan banyak ciri yang cekap dan mudah digunakan, seperti pengikatan data, komponenisasi, responsif, dsb. Pemilihan segmen ialah komponen UI biasa yang membolehkan pengguna memilih satu atau lebih segmen Ia biasanya digunakan dalam senario seperti keadaan pertanyaan, penapisan label dan penapisan data. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan komponen pemilihan tersegmen.

Persediaan

Sebelum kita mula, kita perlu menyediakan fail berikut:

index.html: Mengandungi pengenalan Vue dan kod gantung komponen
Segment.vue komponen pemilihan: Kod untuk segmen pemilihan segmen

Tambahkan kod berikut dalam fail 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>

Salin selepas log masuk

Di sini kami menggunakan versi binaan global Vue 3.0 dan memperkenalkannya ke dalam halaman. Skrip bernama app.js juga diperkenalkan untuk memasang komponen.

Seterusnya buat fail app.js dan tambah kod berikut:

import Segment from './Segment.vue';

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

Salin selepas log masuk

Di sini kami menggunakan API Vue 3.0 untuk mencipta contoh aplikasi kosong, daftarkan komponen bernama Segmen dan lekapkannya pada id Pada elemen DOM aplikasinya. Pada masa yang sama, kami juga perlu mencipta fail bernama Segment.vue untuk melaksanakan kod komponen pemilihan segmen.

Melaksanakan komponen pemilihan segmen

Dalam fail Segment.vue, kami melaksanakan komponen bernama Segmen. Kita perlu menambah tiga prop: data, selectedIndex dan multiSelect. data ialah sumber data tersegmen, selectedIndeX ialah indeks tersegmen yang dipilih pada masa ini dan multiSelect menunjukkan sama ada untuk mendayakan mod berbilang pilih. Pada masa yang sama, kita perlu menentukan kaedah handleSegmentClick dalam komponen untuk mengendalikan peristiwa klik tersegmen.

<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>

Salin selepas log masuk

Dalam bahagian templat, kami menggunakan v-for untuk merentasi setiap segmen dalam sumber data dan menambah gaya aktif pada segmen yang dipilih melalui arahan mengikat gaya. Pada masa yang sama, dengan mengikat acara dengan @click, kami melaksanakan pemprosesan acara klik bersegmen.

Dalam bahagian skrip, kami mentakrifkan kaedah yang dipanggil handleSegmentClick untuk mengendalikan acara klik tersegmen. Dalam kaedah tersebut, kami mula-mula mendapatkan segmen yang dipilih pada masa ini dan melakukan pemprosesan yang berbeza mengikut status mod berbilang pilih atau tidak. Khususnya, dalam mod berbilang pilih, kami menyimpan keadaan yang dipilih dalam tatasusunan yang dipilih, dan apabila segmen dipilih, kami menambah indeks segmen semasa kepada yang dipilih, jika tidak, kami mengalih keluar indeks segmen daripada yang dipilih. Dalam mod pemilihan radio, kami hanya menyimpan indeks segmen yang dipilih dalam yang dipilih Jika segmen yang diklik sudah dipilih, keadaan yang dipilih dikosongkan.

Akhir sekali, kami menghantar keadaan terpilih yang dikemas kini kembali kepada komponen induk melalui ini.$emit. Dan ikat kaedah handleSegmentClick pada acara @click dalam templat.

Menggunakan komponen pemilihan segmen

Dalam fail index.html, kami mencipta pembolehubah yang dipanggil segmentData, yang merupakan jenis tatasusunan, dan menyerahkannya kepada komponen Segmen sebagai prop komponen.

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

Salin selepas log masuk

Seperti yang anda lihat, kami mengkonfigurasikan tiga prop: data, selectedIndex dan multiSelect selectedIndex menggunakan pengubah suai .sync untuk menyokong pengikatan data dua hala.

Seterusnya, kami menambah kod berikut dalam app.js untuk pemulaan data dan pemprosesan yang berkaitan:

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');

Salin selepas log masuk

Dalam kaedah data, kami memulakan tiga pembolehubah: segmentData, selectedIndex dan multiSelect. segmentData ialah sumber data segmen yang perlu kita pilih, selectedIndex digunakan untuk merekod indeks segmen yang dipilih pada masa ini dan multiSelect menunjukkan sama ada pemilihan segmen mendayakan mod berbilang pilihan.

Dalam kaedah, kami mentakrifkan kaedah yang dipanggil toggleSelection, di mana kami menogol nilai multiSelect dan menetapkan nilai selectedIndex mengikut keadaannya. Khususnya, apabila multiSelect adalah benar, kami menetapkan selectedIndex kepada [0, 2], menunjukkan bahawa segmen pertama dan ketiga dipilih, jika tidak, kami menetapkan selectedIndex kepada 0, menunjukkan bahawa segmen pertama dipilih .

Ringkasan

Dalam artikel ini, kami memperkenalkan cara melaksanakan komponen pemilihan bersegmen menggunakan Vue. Komponen ini ialah komponen UI umum yang boleh digunakan dalam pelbagai senario, seperti keadaan pertanyaan, penapisan label, penapisan data, dsb. Melalui pengenalan artikel ini, pembaca boleh mempelajari cara menggunakan Vue untuk melaksanakan ciri penting seperti pengikatan data, komponenisasi dan responsif, serta mendalami pemahaman dan penggunaan Vue mereka.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan komponen pemilihan tersegmen menggunakan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!