Karena saya baru saja mulai terlibat dalam VUE, implementasi semua referensi yang dipilih untuk metode implementasi di Zhihu:
1. Dapatkan data dari server dan atur atribut yang diperiksa untuk setiap item
2. Hitung jumlah terpilih yang dipilih. Jika jumlah yang dipilih sama dengan jumlah selectItems, pilih semua selectAll
3. Saat memilih semua, atur atribut yang diperiksa dari setiap item ke true, dan saat memilih terbalik, atur ke false.
4. Setiap kali properti dari selectItems berubah, item yang diperiksa ditempatkan di array checkedgroups.
Berikut ini adalah kode implementasi:
// Pilih semua data: function () {return {selectItems: [], // data yang diperoleh dari server}}, dihitung: {// pilih semua model yang terikat ke centang selectAll: {get: function () {return this.selectCount == this.selectitems.length; }, set: function (value) {this.selectitems.foreach (function (item) {item.checked = value;}); nilai pengembalian; }}, // Kuantitas SelectCount yang dipilih: {get: function () {var i = 0; this.selectitems.foreach (function (item) {if (item.checked) {i ++;}}); Kembalikan i; }}, // array checkedgroups yang dipilih: {get: function () {var checkedgroups = []; this.selectitems.foreach (function (item) {if (item.checked) {checkedgroups.push (item);}}); Return checkedgroups; }}}Metode ini tidak terlalu nyaman untuk digunakan. Pertama -tama, sulit untuk digunakan kembali. Setiap kali Anda ingin menggunakannya, Anda perlu menulis yang dihitung. Kedua, SelectAll, checkedgroup, dan selectItems semuanya diperbaiki dan tidak terlalu fleksibel.
Jadi dalam proyek ini, saya menggunakan instruksi VUE untuk mengimplementasikan kembali fungsi memilih semua. Gagasan Petunjuk sebenarnya mirip dengan yang dihitung. Pertama, tambahkan kode:
Ekspor default {'check -all': {twoway: true, params: ['checkData'], bind () { / ** - Jika atribut yang diperiksa dari semua daftar adalah benar, pilih kotak centang, jika tidak kotak centang tidak ada. item.Checked)) {this.set (true); }, // Perbarui (centang) Saat checkall mengubah { / ** - Jika kotak centang semua dipilih, semua properti yang dicentang dari daftar dikonversi menjadi true, jika tidak mereka dikonversi menjadi false* / if (checkall) {this.vm [this.params.checkData] .foreach ((item) => {item.checked = true = checkData] .foreach ((item) => {item.checked = true = checkData]. } else {this.vm [this.params.checkdata] .foreach ((item) => {item.checked = false;}); }},},};Ditelepon:
<input type = "centang kotak" v-model = "checkall" v-check-all = "checkall" check-data = "checkData"> <ul> <li v-for = "item di checkData"> <input type = "centang" v-model = "item.Check"> {{item.text} </Li> Li> </check.ceck "> {{{{{{{{{{{{{{{{{{{{{{{{{TTEX} </Li> </Li>Mari kita bicara tentang keuntungan menggunakan ini:
1. Mudah digunakan. Cukup tulis perintah v-check-all dan check-data di mana diperlukan.
2. Model dan nama array yang dipilih dapat disesuaikan, dan nama apa pun dapat digunakan. Jika Anda tidak ingin menghubungi Chosterl dan CheckAllData, Anda juga dapat menghubungi array dan CheckData DataFromServer.
Dalam instruksi, tentukan TwoWay ke True, Anda dapat menggunakan this.set(value) untuk mengatur nilai chossall, dan menggunakan params untuk menerima nilai properti checkData pada elemen instruksi yang mengikat, yang merupakan array untuk beroperasi.
Gunakan this.vm untuk mendapatkan konteks Petunjuk Penggunaan, hubungi $watch of the Context untuk mendengarkan perubahan CheckData. Jika semua checkData dipilih, atur OffAll ke True, jika tidak atur OffAll ke false.
Ketika nilai instruksi (checkall) berubah, jika benar, atur atribut checkData yang diperiksa ke true, jika tidak, itu salah. Pada titik ini, perintah yang dipilih selesai.
Saat melakukan pemilihan ini semua instruksi, saya awalnya ingin menggunakan paramwatcher untuk mendengarkan perubahan checkData, tetapi saya menemukan bahwa ketika CheckData berubah, panggilan balik paramwatcher tidak akan dipicu. Kemudian, saya melihat kode sumber dan menemukan bahwa paramwatcher benar -benar memanggil $watch , tetapi tidak mendukung deteksi mendalam:
Directive.prototype._setupparamwatcher = function (kunci, ekspresi) {var self = this; var disebut = false; var unsatch = (this._scope || this.vm). $ watch (ekspresi, fungsi (val, oldval) {self.params [key] = val; // Karena kita berada dalam mode langsung, // hanya memanggil param ubah panggilan balik jika ini bukan pembaruan pertama. if (dipanggil) {var cb = self.paramwatchers & mandel & self.c & self.cal & self.can & self.el & self. val, oldval);}} else {called = true;Meringkaskan
Di atas adalah seluruh konten artikel ini. Jika ada yang salah, beri saya nasihat. Saya berharap konten artikel ini akan membantu semua orang.