لأنني بدأت للتو في المشاركة في VUE ، فإن تنفيذ جميع المراجع المحددة على طريقة التنفيذ على Zhihu:
1. احصل على بيانات من الخادم وقم بتعيين السمة المحددة لكل عنصر
2. حساب الكمية المحددة SelectCount. إذا كانت الكمية المحددة مساوية لعدد SelectItems ، فحدد كل Selectall
3. عند تحديد الكل ، قم بتعيين السمة المحددة لكل عنصر إلى صواب ، وعند الاختيار عكسياً ، قم بتعيينها على FALSE.
4. في كل مرة يتغير فيها خاصية SelectItems ، يتم وضع العنصر الذي تم فحصه في مجموعات الفحص.
فيما يلي رمز التنفيذ:
// حدد جميع البيانات: function () {return {selectItems: [] ، // البيانات التي تم الحصول عليها من الخادم}} ، محسوبة: {// حدد جميع النماذج المرتبطة باختيار مربع الاختيار: {get: function () {return this.selectcount == this.selecteMs.length ؛ } ، set: function (value) {this.selectiTems.foreach (function (item) {item.checked = value ؛}) ؛ قيمة الإرجاع }} ، // selectcount الكمية المحددة: {get: function () {var i = 0 ؛ this.selectiTems.foreach (function (item) {if (item.checked) {i ++ ؛}}) ؛ العودة أنا. }} ، // مجموعات checkedgroups المحددة: {get: function () {var checkedGroups = [] ؛ this.selectiTems.foreach (وظيفة (عنصر) {if (item.checked) {checkedGroups.push (item) ؛}}) ؛ إرجاع مجموعات checkedgroups. }}}هذه الطريقة ليست مريحة للغاية للاستخدام. بادئ ذي بدء ، من الصعب إعادة استخدامها. في كل مرة تريد استخدامها ، تحتاج إلى الكتابة. ثانياً ، يتم إصلاح كلها Selectall و CheckedGroups و SelectIms وليست مرنة للغاية.
لذلك في هذا المشروع ، استخدمت تعليمات VUE لإعادة تنفيذ وظيفة اختيار الكل. فكرة التوجيه تشبه في الواقع فكرة المحسوبة. لنبدأ بالرمز:
التصدير الافتراضي {'check -all': {twoway: true ، params: ['checkdata'] ، bind () { / ** - إذا كانت السمة المحددة لجميع القوائم صحيحة ، حدد مربع الاختيار ، وإلا item.checked) {this.set (true) ؛ } ، // update (checkall) عندما يتغير checkall { / ** - إذا تم تحديد مربع الاختيار ، يتم تحويل جميع الخصائص المحددة للقائمة إلى صواب ، وإلا يتم تحويلها إلى false* / if (checkall) {this.vm [this.params.checkdata]. } آخر {this.vm [this.params.checkdata]. foreach ((item) => {item.checked = false ؛}) ؛ }} ،} ،} ؛مُسَمًّى:
<type type = "checkbox" v-model = "checkall" v-check-all = "checkall" check-data = "checkData"> <ul> <li v-for = "item in checkData"> <input type = "checkbox
دعنا نتحدث عن مزايا استخدام هذا:
1. سهلة الاستخدام. فقط اكتب v-check-all و check-data عند الحاجة.
2. يمكن تخصيص الأسماء المحددة وأسماء الصفيف ، ويمكن استخدام أي اسم. إذا كنت لا ترغب في الاتصال بـ CheckAll و CheckAllData ، فيمكنك أيضًا استدعاء المصفوفات و CheckData DataFromserver.
في التعليمات ، حدد twoway إلى true ، يمكنك استخدام this.set(value) .
استخدم this.vm للحصول على سياق توجيه الاستخدام ، $watch للسياق للاستماع إلى التغييرات في checkData. إذا تم تحديد جميع CheckData ، فقم بتعيين Checkall على True ، وإلا قم بتعيين Checkall على False.
عندما تتغير قيمة التعليم (CheckAll) ، إذا كان صحيحًا ، قم بتعيين السمة المحددة لـ CheckData إلى True ، وإلا فإنها خاطئة. في هذه المرحلة ، يتم الانتهاء من أمر محدد.
عند القيام بهذا التحديد ، أردت في الأصل استخدام ParamWatchers للاستماع إلى تغييرات CheckData ، لكنني وجدت أنه عندما يتغير CheckData ، فلن يتم تشغيل رد اتصال ParamWatchers. في وقت لاحق ، نظرت إلى الكود المصدر ووجدت أن Paramwatchers يسمى بالفعل $watch ، لكنه لا يدعم الكشف العميق:
توجيهات .prototype._setupparamwatcher = الدالة (المفتاح ، التعبير) {var self = this ؛ var تسمى = خطأ ؛ var unwatch = (this._scope || this.vm). $ watch (التعبير ، الدالة (val ، oldval) {self.params [key] = val ؛ // لأننا في وضع فوري ، // فقط استدعاء علامات الاستدعاء الخاصة بتغيير المعلمة إذا لم يكن هذا هو التحديث الأول. Val ، Oldval) ؛لخص
ما سبق هو المحتوى الكامل لهذه المقالة. إذا كان هناك شيء خاطئ ، فالرجاء إعطائي بعض النصائح. آمل أن يكون محتوى هذه المقالة مفيدًا للجميع.