เนื่องจากฉันเพิ่งเริ่มมีส่วนร่วมใน Vue การใช้งานการอ้างอิงที่เลือกทั้งหมดไปยังวิธีการใช้งานบน Zhihu:
1. รับข้อมูลจากเซิร์ฟเวอร์และตั้งค่าแอตทริบิวต์ที่ตรวจสอบสำหรับแต่ละรายการ
2. คำนวณปริมาณ SelectCount ที่เลือก หากปริมาณที่เลือกเท่ากับจำนวน SelectItems ให้เลือก SELECTALL ทั้งหมด
3. เมื่อเลือกทั้งหมดให้ตั้งค่าแอตทริบิวต์ที่ตรวจสอบของแต่ละรายการเป็น TRUE และเมื่อเลือกแบบผกผันให้ตั้งค่าเป็นเท็จ
4. ทุกครั้งที่คุณสมบัติของ SelectItems เปลี่ยนแปลงรายการที่ตรวจสอบจะถูกวางไว้ในกลุ่มตรวจสอบอาร์เรย์
ต่อไปนี้เป็นรหัสการใช้งาน:
// เลือกข้อมูลทั้งหมด: function () {return {selectiTems: [], // ข้อมูลที่ได้รับจากเซิร์ฟเวอร์}}, คำนวณ: {// เลือกโมเดลทั้งหมดที่ถูกผูกไว้กับช่องทำเครื่องหมายเลือก: {get: function () {return this.selectCount == this.selectItems.length; }, set: function (value) {this.selectItems.foreach (ฟังก์ชั่น (รายการ) {item.checked = value;}); ค่าส่งคืน; }}, // ปริมาณที่เลือก SelectCount: {get: function () {var i = 0; this.selectitems.foreach (ฟังก์ชั่น (รายการ) {ถ้า (item.checked) {i ++;}}); กลับฉัน; }}, // อาร์เรย์ที่เลือกตรวจสอบกลุ่ม: {get: function () {var checkedGroups = []; this.selectitems.foreach (ฟังก์ชั่น (รายการ) {ถ้า (item.checked) {checkedGroups.push (รายการ);}}); ส่งคืนกลุ่มตรวจสอบ; -วิธีนี้ใช้งานไม่ได้มากนัก ก่อนอื่นมันเป็นเรื่องยากที่จะนำกลับมาใช้ใหม่ ทุกครั้งที่คุณต้องการใช้งานคุณต้องเขียนคำนวณ ประการที่สองเลือกทั้งหมดตรวจสอบกลุ่มและ selectItems ทั้งหมดได้รับการแก้ไขและไม่ยืดหยุ่นมาก
ดังนั้นในโครงการนี้ฉันใช้คำสั่ง VUE เพื่อดำเนินการอีกครั้งฟังก์ชั่นของการเลือกทั้งหมด แนวคิดของคำสั่งนั้นคล้ายกับที่คำนวณ ก่อนอื่นเพิ่มรหัส:
การส่งออกค่าเริ่มต้น {'Check -all': {twoway: true, params: ['checkdata'], bind () { / ** - หากแอตทริบิวต์ตรวจสอบของรายการทั้งหมดเป็นจริงเลือกกล่องกาเครื่องหมายทั้งหมดมิฉะนั้นช่องทำเครื่องหมาย* / this.vm. $ watch (this.params.checkdata item.checked)) {this.set (true); }, // update (checkall) เมื่อการตรวจสอบการเปลี่ยนแปลง { / ** - หากเลือกกล่องเช็คทั้งหมดคุณสมบัติที่ตรวจสอบทั้งหมดของรายการจะถูกแปลงเป็นจริงมิฉะนั้นพวกเขาจะถูกแปลงเป็นเท็จ* / ถ้า (ตรวจสอบ) {this.vm [this.params.checkdata]. } else {this.vm [this.params.checkdata] .foreach ((รายการ) => {item.checked = false;}); -เรียกว่า:
<อินพุต type = "ช่องทำเครื่องหมาย" v-model = "checkall" v-check-all = "checkall" check-data = "checkdata"> <ul> <li v-for = "รายการใน checkData"> <อินพุตประเภท = "ช่องทำเครื่องหมาย" v-model = "รายการ
มาพูดถึงข้อดีของการใช้สิ่งนี้:
1. ใช้งานง่าย เพียงแค่เขียนคำสั่ง v-check-all และ check-data ที่จำเป็น
2. ชื่อโมเดลและอาร์เรย์ที่เลือกสามารถปรับแต่งได้และสามารถใช้ชื่อใด ๆ ได้ หากคุณไม่ต้องการโทร Checkall และ CheckallData คุณสามารถโทรหาอาร์เรย์และตรวจสอบ DataFromserver ได้
ในคำสั่งให้ระบุ Twoway to True คุณสามารถใช้ this.set(value) เพื่อตั้งค่าของ checkall และใช้ params เพื่อรับค่าคุณสมบัติการตรวจสอบข้อมูลบนองค์ประกอบคำสั่งที่มีผลผูกพันซึ่งเป็นอาร์เรย์ในการทำงาน
ใช้ this.vm เพื่อรับบริบทของคำสั่งการใช้งานโทรไป $watch ของบริบทเพื่อฟังการเปลี่ยนแปลงใน CheckData หากเลือก CheckData ทั้งหมดให้ตั้งค่า Checkall เป็น TRUE มิฉะนั้นตั้งค่า Checkall เป็น FALSE
เมื่อค่าคำสั่ง (ตรวจสอบ) เปลี่ยนแปลงหากเป็นจริงให้ตั้งค่าแอตทริบิวต์ตรวจสอบของ CheckData เป็น TRUE มิฉะนั้นจะเป็นเท็จ ณ จุดนี้คำสั่งที่เลือกจะเสร็จสมบูรณ์
เมื่อทำการเลือกนี้คำสั่งทั้งหมดฉันต้องการใช้ paramwatchers เพื่อฟังการเปลี่ยนแปลง CheckData แต่ฉันพบว่าเมื่อตรวจสอบการเปลี่ยนแปลงการโทรกลับของ paramwatchers จะไม่ถูกเรียกใช้ ต่อมาฉันดูที่ซอร์สโค้ดและพบว่า Paramwatchers จริง ๆ เรียกว่า $watch แต่มันไม่รองรับการตรวจจับลึก:
directive.prototype._setupparamwatcher = ฟังก์ชั่น (คีย์, นิพจน์) {var self = this; var เรียกว่า = false; var unwatch = (this._scope || this.vm). $ watch (นิพจน์, ฟังก์ชั่น (val, oldval) {self.params [key] = val; // เนื่องจากเราอยู่ในโหมดทันที // เรียกพาราม val, oldval);}} else {เรียกว่า = true;}}, {ทันที: จริง, ผู้ใช้: false});สรุป
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ หากมีบางอย่างผิดปกติโปรดให้คำแนะนำกับฉัน ฉันหวังว่าเนื้อหาของบทความนี้จะเป็นประโยชน์กับทุกคน