Vue ينفذ مكون ترقيم الصفحات Vue-Paginaiton
أشعر أنني استخدمت Vue لفترة من الوقت ، ولم أعد أرغب في تشغيل DOM مباشرة. تجربة البرمجة المرتبطة بالبيانات جيدة حقًا. تنفيذ مكون الترحيل.
لن يتم إصدار CSS هنا. يمكنك قراءته وتنزيله مباشرة على Github: vue-pagination
دعنا نلتقط صورة للمثال أولاً
مرسام
<viv> <ul> <li v-if = "showfirsttext"> <a v-on: click = "cur-"> الصفحة السابقة </a> </li> <li v-for = "index in pagenums"> <a v-on: click = "pagechange) v-on: click = "cur ++"> الصفحة التالية </a> </li> <li> <a> <a> إجمالي <i> {all}} </i> </a> </li> </ul> </iv>قبل تقديم JS ، يمكن ببساطة إخراج عرض الصفحة والتحليل ببساطة مباشرة. {{index}} هو رقم الصفحة ، والذي يتطلب بعض التقديم الديناميكي.
var app = new vue ({el: '#app' ، data: {currentpage: 1 ، totlepage: 28 ، visiblepage: 10 ، msg: '} ،})استدعاء Vue New Vue ({parameter}) هو إنشاء مكون أساسي ، وتعيينه إلى app.el المتغير هو اختصار العنصر ، ووضع موضع القالب. data هو البيانات. أعلم أن إجمالي عدد الصفحات ، ولكن لعرض رقم الصفحة ، لا يزال يتعين حسابه ، لذا فإن عرض رقم الصفحة هو سمة الحساب. لذلك نحن بحاجة إلى استخدام الحساب
محسوبة: {// السمات المحسوبة: العودة إلى صفيف رقم الصفحة ، سيتم تنفيذ الفحص القذر تلقائيًا هنا ، بدون $ watch () ؛ pagenums: function () {// page boundary قبل وبعد التهيئة var lowpage = 1 ؛ var highpage = this.totlepage ؛ var pagearr = [] ؛ إذا (this.totlepage> this.visiblepage) {// إذا كان العدد الإجمالي للصفحات يتجاوز عدد الصفحات المرئية ، فسيتم إجراء مزيد من المعالجة ؛ var subvisiblepage = math.ceil (this.visiblePage/2) ؛ if (this.currentPage> subvisiblepage && this.currentPage <this.totlePage - subvisiblepage +1) {// معالجة الصفحة lowpage lowpage lowpage = this.currentPage - subvisiblepage ؛ Highpage = this.currentPage + subvisiblePage -1 ؛ } آخر إذا (this.currentPage <= subvisiblepage) {// معالجة الصفحة المنطقية المنطقية للصفحات القليلة السابقة = 1 ؛ Highpage = this.visiblepage ؛ } آخر {// معالجة صفحة منخفضة منطقية للصفحات القليلة الماضية = this.totlePage - this.visiblePage + 1 ؛ Highpage = this.totlepage ؛ }} // بعد تحديد حدود الصفحة العلوية والسفلية ، يجب عليك الاستعداد للضغط على الصفيف وتكون (lowpage <= highpage) {pagearr.push (lowpage) ؛ lowpage ++ ؛ } إرجاع pagearr ؛ }} ،عند مشاهدة قالب HTML ، وجدت توجيه V-if. من الواضح أنه عندما يكون المحتوى صحيحًا ، فسيتم إخراجه ، وإذا لم يكن كذلك.
قم بالتركيز على
<li v-for = "index in pagenums" v-bind: class = "{Active: currentPage == index}"> <a v-on: click = "pagechange (index)"> {{index}} </a> </li>v-for هو pagenums سمة إخراج الحلقة. يتم تعيين كل عنصر طفل حلقة لفهرس V-bind: فئة لربط الفئة. عند تقديم علامة الزاوية الحالية ، أضف الفئة V-ON: انقر لربط الحدث. أقوم بتمرير الفهرس كمعلمة في ، وأصدر حكمًا لاحقًا ، وأمر الحدث بشكل افتراضي.
ثم نضيف حقل الطرق إلى خيار VUE
الطريقة: {pagechange: function (page) {if (this.currentPage! = page) {this.currentPage = page ؛ هذا. $ dispatch ('change' ، page) ؛ // التواصل بين مكونات الوالدين والطفل: ==> يوزع المكونات الفرعية الأحداث من خلال $ dipatch () ، وفقاعات المكون الأصل ويستمع إلى الأحداث المقابلة من خلال v-on: page change ؛ } ؛ }}تفاعل المكون
انتهى المكون من الكتابة ، والمشكلة هي أن المستخدم ينقر على الصفحة للتغيير. كيف تقوم بإخطار المكونات الأخرى بإجراء تغييرات مماثلة؟ يمكنك إدراج عبارة ضمن الوظيفة التي تتغير فيها زاوية الصفحة. لكن هذه الطريقة هي نهج سيء للغاية. متاح
Watch: {CurrentPage: Function (Oldvalue ، newValue) {console.log (وسيطات)}}راقب بيانات page الحالية عند تغييرها ، قبل وبعد القيم يمكن الحصول عليها. ثم إخطار المكونات الأخرى.
يمكن العثور على الرمز الكامل في Github: vue-pagination
تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
للدروس التعليمية على مكونات vue.js ، يرجى النقر على الموضوع الخاص التعليمي التعليمي للموضوع Vue.js للتعلم.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.