لم أقم بتحديث المقالة لفترة من الوقت ، وذلك أساسًا لأنني كنت مشغولاً بتعلم أشياء جديدة ونسي مشاركتها. أشعر بالخجل حقًا.
انظر ، لقد نشرت مقالًا في منتصف الليل ، حيث أشارك عنصرًا Vue تسمى Bootpage التي كتبتها بنفسي.
إذا كنت لا تفهم Vue.js ، فيمكنك الانتقال إلى مقالتي السابقة "حديثًا موجزًا عن Vue.js" للتعرف عليه.
مقدمة لمكونات bootpage
في الواقع ، إنه ليس مكونًا متطورًا. على العكس من ذلك ، فهو في الحقيقة مجرد مكون ترحيل طاولة بسيط. يرجع السبب في ذلك إلى أنني بحاجة إلى مكون ترحيل الجدول في مشروعي الأخير. إن مكونات ترقيم مكتبة VUE الرسمية للمكونات قوية جدًا أو غير مناسبة بالنسبة لي ، لذلك كتبت بنفسي لأقوم به. ربما يحتاج شخص مثلي إلى هذا المكون البسيط لتنفيذ وظائف الترحيل البسيطة. سوف أشاركها هنا ، وسيملأ الجميع الحفر.
إذا كنت بحاجة إلى مكونات راقية ، فيمكنك الانتقال إلى مكتبة مكون VUE الرسمية: https://github.com/vuejs/awesome-vue#libraries-plugins
BootPage هو مكون ترحيل الجدول يدعم البيانات الثابتة وبيانات الخادم. وهو يدعم ضبط عدد الصفوف المعروضة في كل صفحة وعدد الصفحات المعروضة. يعتمد الأسلوب على bootstrap ، تمامًا مثل هذا:
العرض التوضيحي عبر الإنترنت: https: //luozhihao.github.io/b ...
كيفية استخدام
في ملف مكون .vue ، نكتب قالب مثل هذا ، أي رمز HTML:
<Table> <thead> <tr> <th> id </h> <th> الاسم </th> <th> المحتوى </th> <th> ملاحظة </th> </tr> </thead> <tbody> <ttr v-for = "data in tablelist"> <td v-text = "data.num"> </td> v-text = "data.contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <tr> <td colspan = "4"> <viv> <button v-on: click = "reash" : page-len = "pagelen": param = "param"> </boot-page> </viv> </td> </td> </tfoot> </table>
في <-boot-page> ، يشير علامة ASYNC إلى ما إذا كان سيتم الحصول على بيانات من جانب الخادم ، FALSE هو لا ؛ البيانات هي صفيف بيانات جدولي ثابت. العدسة هي مجموعة من الصفوف المعروضة لكل صفحة ؛ الصفحة LEN هي عدد الصفحات التي يمكن عرضها ؛
رمز JavaScript الذي يستخدم بيانات ثابتة ، أي أن المحتويات في علامة البرنامج النصي هي كما يلي:
<script> استيراد pootpage من './components/bootpage.vue' تصدير الافتراضي {data () {return {lenarr: [10 ، 50 ، 100] ، 'DSDS'} ، {num: 2 ، المؤلف: 'luozh' ، المحتويات: "دعم لضبط عدد الصفوف المعروضة لكل صفحة وعدد الصفحات المعروضة. يعتمد النمط على bootstrap "، ملاحظة:" dsds '} ، {num: 3 ، المؤلف:' luozh '، المحتويات:' <boot-page> tag async يشير إلى ما إذا كان يجب استرداد البيانات من جانب الخادم ، خطأ لا ، ". "DSDS '} ، {num: 5 ، المؤلف:' luozh '، المحتويات:" العدسة عبارة عن مجموعة من الصفوف المعروضة لكل صفحة "، ملاحظة:" dsds'} ، {num: 6 ، المؤلف: 'luozh' ، المحتويات: "page-len هو عدد الصفحات التي يمكن عرضها" ، ملاحظة: "dsds" معلمات إرجاع الخادم هي {data: [] ، page_num: 6} ، حيث تكون البيانات بيانات جدولة و page_num هي العدد الإجمالي للصفحات "، ملاحظة: 'dsds'} ، {num: 8 ، المؤلف: 'luozh' ، المحتويات: TableList عند استخدام بيانات الخادم: [] // بيانات post-paking التي يتم إرجاعها بواسطة مكون ترقيم الصفحات}} ، المكونات: {bootpage} ، الأحداث: {// بيانات الجدول التي يتم إرجاعها بواسطة مكون ترقيم الصفحات '(البيانات) {this.tablelist = data}}}بشكل عام ، نادراً ما نستخدم بيانات جدولة ثابتة ، ويتم الحصول على بيانات معظم التطبيقات من جانب الخادم ، لذلك فيما يلي طريقة للحصول على بيانات ترقيم الخادم:
المكون HTML الذي يستخدم بيانات الخادم هو كما يلي:
<page-page v-ref: الصفحة: async = "true": lens = "lenarr": url = "url": page-len = "pagelen": param = "param"> </boot-page>
حيث عنوان URL هو عنوان طلب الخادم ؛ Param هو كائن المعلمة الذي يجب إرساله إلى الخادم ؛
الرمز الذي يستخدم بيانات الخادم javaScript هو كما يلي:
<script> استيراد bootpage من './components/bootpage.vue' التصدير الافتراضي {data () {return {lenarr: [10 ، 50 ، 100] ، // عرض العرض لكل صفحة تعيين pagelen: 5 ، // رقم posts tabations: ' مرة أخرى من خلال مكون ترقيم الصفحات}} ، الطرق: {refresh () {this. $ refs.page.refresh () // يتم توفير وظيفة تحديث الجدول هنا}} ، المكونات: {bootpage} ، الأحداث: {// بيانات الجدول التي يتم إرجاعها بواسطة مكون pagination (هنا هي البيانات التي تم إرجاعها بواسطة الخادم) "البيانات) () {this.refresh ()}}}} </script>ملاحظة: بالإضافة إلى محتوى الصفيف الذي تم تمريره إلى جدول المكون ، يحتاج الخادم أيضًا إلى اسم مفتاح لإجمالي عدد الصفحات ، المسماة Page_Num
المعلمات التي يأتيها المكون مع الخادم هي:
{
نشط: 1 ، // رقم الصفحة الحالي
الطول: 5 // عدد المعروض لكل صفحة
}
يجب أن تكون معلمات إرجاع الخادم:
{
البيانات: [] ، // بيانات جدولة
page_num: 5 // إجمالي عدد الصفحات
}
رمز مصدر المكون
بالنسبة لتنفيذ ترقيم الصفحات ، لن أعرض رمز المصدر هنا. لقد قمت بتحميل جميع الكود المصدري إلى github الخاص بي ، والعنوان هو: https://github.com/luozhihao/bootpage
اسمحوا لي أن أذكرك مقدمًا: لأنني استغرقت عدة ساعات لأخرج هذا المكون ، يجب أن أكون غير كافٍ في كتابة التنسيقات ومواصفات مكونات VUE ولم أكن مستقلة تمامًا ، لذلك أنا ملء الحفرة بوعي. سأشاركه فقط هنا.
بالطبع ، يمكنك أيضًا تعديل رمز المكون حسب الرغبة لتناسب استخدام مشروعك. بعد كل شيء ، من المعقد للغاية تنفيذ مكونات الترحيل الكبيرة والكاملة.
تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.