Cara menggunakan arahan pilih semua Vue.js untuk melaksanakan operasi pilih semua bagi berbilang kotak pilihan

Dalam pembangunan Vue.js, selalunya perlu untuk mengendalikan operasi pilih-semua kotak berbilang pilihan. Menggunakan arahan model v Vue.js, anda boleh melaksanakan fungsi pilihan tunggal dan berbilang pilihan bagi kotak berbilang pilihan dengan mudah. Walau bagaimanapun, untuk melaksanakan fungsi pilih-semua kotak berbilang pilihan, anda perlu menggunakan arahan tersuai Vue.js. Artikel ini akan memperkenalkan cara menggunakan arahan pilih semua Vue.js untuk melaksanakan operasi pilih semua kotak berbilang pilihan.

1. Buat arahan pilih-semua

Mula-mula, tentukan arahan pilih-semua dalam contoh Vue.js, dinamakan v-check-all:

Vue.directive('check-all', {
  bind: function(el, binding) {
    el.checked = binding.value;
    el.indeterminate = true; // 中间状态
  },
  update: function(el, binding) {
    el.checked = binding.value;
  }
});

Arahan ini terikat pada elemen kotak semak. Ia mempunyai dua fungsi kitaran hayat, iaitu mengikat dan mengemas kini.

Dalam fungsi kitaran hayat ikatan, kami menetapkan status yang disemak bagi elemen kotak berbilang pilihan kepada nilai pengikatan arahan dan menetapkan atribut tak tentu kepada benar. Atribut tak tentu menunjukkan bahawa elemen kotak berbilang pilihan berada dalam keadaan pertengahan, iaitu, ia bukan keadaan terpilih mahupun keadaan tidak dipilih. Ini adalah untuk mencapai keadaan yang dipilih separa dalam fungsi pilih semua.

Dalam fungsi kitaran hayat kemas kini, kami mendengar nilai yang terikat pada arahan Setelah nilai arahan berubah, kami menetapkan status yang diperiksa bagi elemen kotak berbilang pilihan kepada nilai tersebut. Dengan cara ini, fungsi pilih-semua direalisasikan.

2. Gunakan arahan pilih semua

Seterusnya, gunakan arahan v-check-all dalam senarai kotak berbilang pilihan yang memerlukan fungsi pilih semua untuk mencapai pilihan semua operasi. Seperti yang ditunjukkan dalam kod berikut:

<div id="app">
  <input type="checkbox" v-model="allChecked" v-check-all="allChecked">
  <span>全选/取消全选</span>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <input type="checkbox" v-model="item.checked">
      <span>{{ item.name }}</span>
    </li>
  </ul>
</div>

Dalam contoh di atas, kami menggunakan arahan model-v untuk mengikat keadaan kotak pilihan penuh yang ditandai kepada atribut allChecked bagi contoh Vue.js. Apabila kotak semua pilih dipilih, nilai atribut allChecked adalah benar, jika tidak ia adalah palsu.

Kemudian, dalam teg ul, kami menggunakan arahan v-for untuk beralih melalui setiap elemen dalam senarai. Setiap elemen item senarai mengandungi kotak semak dan nama.

Gunakan arahan model-v pada kotak berbilang pilihan untuk mengikat status yang disemak bagi setiap elemen kepada atribut unsur yang ditandakan. Apabila elemen dipilih, nilai atribut yang disemak adalah benar, jika tidak ia adalah palsu.

Akhir sekali, gunakan arahan v-check-all pada kotak semua-pilih dan tetapkan nilai terikat pada arahan kepada atribut allChecked untuk mencapai fungsi semua-pilih.

3. Melaksanakan keadaan yang dipilih separa

Dalam contoh di atas, kami menggunakan atribut tak tentu untuk melaksanakan keadaan yang dipilih separa. Apabila semua kotak berbilang pilihan dalam senarai dipilih, kotak semua pilihan menjadi dipilih apabila satu atau lebih kotak berbilang pilihan dalam senarai dinyahpilih, kotak semua pilihan menjadi tidak dipilih. Apabila beberapa kotak berbilang pilihan dalam senarai dipilih, kotak semua pilihan berada dalam keadaan tengah.

Untuk mencapai keadaan separa yang dipilih, kami juga perlu menentukan sifat yang dikira dalam tika Vue.js untuk menentukan sama ada bilangan kotak berbilang pilihan dalam senarai adalah sama dengan nombor yang dipilih. Jika ia adalah sama, ini bermakna semua kotak berbilang pilihan dipilih, dan kotak semua pilihan harus dipilih pada masa ini jika bilangan item yang dipilih ialah 0, ini bermakna semua kotak berbilang pilihan tidak dipilih , dan kotak semua pilihan hendaklah dinyahpilih pada masa ini, jika tidak, kotak semua pilihan berada dalam keadaan tengah.

computed: {
  allChecked: {
    get: function() {
      return this.list.every(function(item) {
        return item.checked
      });
    },
    set: function(value) {
      this.list.forEach(function(item) {
        item.checked = value;
      });
    }
  }
}

Dalam contoh di atas, kami menggunakan sifat terkira Vue.js untuk melaksanakan semua pemilihan dan mentakrifkan sifat terkira allChecked. Dalam kaedah dapatkan, kami mengulangi setiap elemen dalam senarai Setelah atribut yang ditandakan bagi sesuatu elemen adalah palsu, kami mengembalikan palsu, menunjukkan bahawa tidak semua kotak berbilang pilihan dipilih. Jika tidak, mengembalikan benar, menunjukkan bahawa semua kotak pilihan dipilih. Dalam kaedah yang ditetapkan, kami menetapkan atribut yang disemak bagi setiap elemen dalam senarai kepada nilai yang ditentukan, iaitu, untuk mencapai fungsi memilih semua dan menyahpilih semua.

Secara umum, ini adalah cara yang sangat mudah untuk menggunakan arahan tersuai untuk memilih semua kotak pilihan berbilang. Melalui contoh di atas, saya percaya bahawa pembaca telah menguasai penggunaan Vue.js pilih semua arahan.

Atas ialah kandungan terperinci Cara menggunakan arahan pilih semua Vue.js untuk melaksanakan operasi pilih semua bagi berbilang kotak pilihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!