Amalan komponen Vue: pembangunan komponen halaman

Amalan komponen Vue: pembangunan komponen halaman

Pengenalan

Dalam aplikasi web, fungsi halaman adalah komponen penting. Komponen paging yang baik hendaklah ringkas dan jelas dalam persembahan, kaya dengan fungsi, dan mudah untuk disepadukan dan digunakan.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja Vue.js untuk membangunkan komponen halaman yang sangat boleh disesuaikan. Kami akan menerangkan secara terperinci cara membangunkan menggunakan komponen Vue melalui contoh kod.

Timbunan teknologi

• Vue.js 2.x
• JavaScript (ES6)
• HTML5 dan CSS3

Persekitaran pembangunan

• v8Node.js.
V ue.js v2 .5.2

Keperluan komponen penomboran

Terima jumlah halaman (jumlah) dan bilangan halaman semasa (semasa) melalui props
• Anda boleh mengkonfigurasi bilangan maksimum halaman yang dipaparkan (maxShown)
• konfigurasikan teks yang dipaparkan oleh butang (prevTeks dan nextTeks) dan gaya butang
• Klik nombor halaman untuk beralih ke halaman yang sepadan
• Nombor halaman semasa diserlahkan
• Apabila halaman semasa tidak mempunyai halaman sebelumnya, klik acara butang halaman sebelumnya diabaikan
• Apabila halaman semasa tidak mempunyai halaman seterusnya, abaikan acara klik butang halaman seterusnya

Idea reka bentuk dan pelaksanaan kod

Mengikut keperluan, kami membahagikan komponen halaman kepada beberapa komponen kecil untuk pelaksanaan. Kita perlu mencipta 3 komponen kecil berikut:

Pagination.vue

komponen halaman utama, yang bertanggungjawab untuk memproses data penomboran dan logik. Hantar maklumat paging kepada subkomponen dan balas peristiwa subkomponen.

Button.vue

Komponen ini ialah komponen butang, digunakan untuk membuat butang paging.

Page.vue

Komponen ini digunakan untuk membuat satu blok halaman, termasuk label halaman dan status. Blok halaman boleh menjadi halaman semasa atau halaman bukan semasa.

Seterusnya, mari kita gunakan kod untuk melaksanakan 3 komponen di atas.

Pagination.vue

1. <template>
     <div class="pagination-container">
       <button-prev :current="current" @onPrev="prev"></button-prev>
       <page v-for="page in pages"
         :key="page"
         :page="page"
         :is-selected="page === current"
         @on-page-selected="selectPage"></page>
       <button-next :current="current" :total="total" @onNext="next"></button-next>
     </div>
   </template>
   <script>
   import ButtonPrev from './ButtonPrev.vue';
   import ButtonNext from './ButtonNext.vue';
   import Page from './Page.vue';
   
   export default {
     components: { ButtonPrev, ButtonNext, Page },
     props: {
       total: {
         type: Number,
         default: 10
       },
       current: {
         type: Number,
         default: 1
       },
       maxShown: {
         type: Number,
         default: 5
       },
       prevText: {
         type: String,
         default: '上一页'
       },
       nextText: {
         type: String,
         default: '下一页'
       }
     },
     computed: {
       pages () {
         const start = Math.max(1, this.current - Math.floor(this.maxShown / 2));
         const end = Math.min(this.total, start + this.maxShown - 1);
         return Array.from({ length: end - start + 1 }, (v, k) => start + k);
       }
     },
     methods: {
       selectPage (page) {
         if (this.current === page) return;
         this.current = page;
         this.$emit('onPageChanged', page);
       },
       prev () {
         if (this.current > 1) {
           this.selectPage(this.current - 1);
         }
       },
       next () {
         if (this.current < this.total) {
           this.selectPage(this.current + 1);
         }
       }
     }
   }
   </script>

Dalam kod di atas, kami mula-mula mengimport komponen ButtonPrev, ButtonNext dan Page. Seterusnya, atribut jumlah, semasa, maxShown, prevText dan nextText diperoleh menggunakan prop, dan halaman atribut yang dikira ditakrifkan Berdasarkan nombor halaman semasa (semasa) dan nombor halaman maksimum (maxShown), tatasusunan yang mengandungi nombor halaman diperolehi untuk digunakan dalam komponen.

Kami juga mentakrifkan kaedah selectPage, di mana jika nombor halaman (halaman) adalah sama dengan nombor halaman semasa (semasa), kembali atau tidak melakukan apa-apa. Jika tidak, nombor halaman baharu dipancarkan kepada komponen induk. Kaedah

sebelumnya() dan seterusnya() digunakan untuk mengendalikan acara halaman sebelumnya dan halaman seterusnya dan menghalang acara daripada dibalas.

ButtonPrev.vue

2. <template>
       <button
         class="btn-previous"
         :disabled="current === 1"
         @click="onPrev()">
         {{ prevText }}
       </button>
   </template>
   
   <script>
   export default {
     props: {
       prevText: {
         type: String,
         default: '上一页'
       },
       current: {
         type: Number,
         default: 1
       }
     },
     methods: {
       onPrev () {
         this.$emit('onPrev');
       }
     }
   }
   </script>
   
   <style scoped>
   .btn-previous {
     border: none;
     color: #333;
     display: inline-block;
     font-size: 16px;
     padding: 6px 12px;
     margin-right: 5px;
     background-color:#fff;
     cursor: pointer;
     border-radius: 2px;
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   }
   .btn-previous:disabled {
     color: #ccc;
     cursor: default;
   }
   </style>

Dalam kod di atas, kami mula-mula mendapatkan nombor halaman semasa (semasa) dan atribut teks (prevTeks) butang halaman sebelumnya melalui prop. Dalam templat, gunakan pengikatan kelas (dilumpuhkan) untuk mengawal keadaan penggunaan butang. Kaedah onPrev ditakrifkan, yang mencetuskan peristiwa onPrev komponen induk.

ButtonNext.vue

3. <template>
       <button
         class="btn-next"
         :disabled="current === total"
         @click="onNext()">
         {{ nextText }}
       </button>
   </template>
   
   <script>
   export default {
     props: {
       total: {
         type: Number,
         default: 10
       },
       nextText: {
         type: String,
         default: '下一页'
       },
       current: {
         type: Number,
         default: 1
       }
     },
     methods: {
       onNext () {
         this.$emit('onNext');
       }
     }
   }
   </script>
   
   <style scoped>
   .btn-next {
     border: none;
     color: #333;
     display: inline-block;
     font-size: 16px;
     padding: 6px 12px;
     margin-left: 5px;
     background-color: #fff;
     cursor: pointer;
     border-radius: 2px;
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   }
   .btn-next:disabled {
     color: #ccc;
     cursor: default;
   }
   </style>

Dalam kod di atas, kami menyalin kod ButtonPrev.vue dan menukar sedikit teks dan syarat penghakiman.

Page.vue

4. <template>
     <button :class="{ current: isSelected }" class="btn-page" @click="onPageSelected(page)">
       {{ page }}
     </button>
   </template>
   
   <script>
   export default {
     props: {
       page: {
         type: Number,
         required: true
       },
       isSelected: {
         type: Boolean,
         default: false
       }
     },
     methods: {
       onPageSelected () {
         this.$emit('onPageSelected', this.page);
       }
     }
   }
   </script>
   
   <style scoped>
   .btn-page {
     border: none;
     color: #333;
     display: inline-block;
     font-size: 16px;
     padding: 6px 12px;
     margin-left: 5px;
     background-color: #fff;
     cursor: pointer;
     border-radius: 2px;
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   }
   .btn-page.current {
     background-color: #0078d7;
     color: #fff;
   }
   </style>

Dalam kod di atas, kami memperoleh nilai nombor halaman (halaman) dan atribut isSelected bagi butang melalui prop. Dalam templat, gunakan pengikatan kelas ("semasa") untuk menyerlahkan halaman yang dipilih.

Kami juga mentakrifkan kaedah onPageSelected, yang mencetuskan peristiwa onPageSelected komponen induk.

Akhir sekali, komponen ini boleh digunakan dalam templat dalam mana-mana aplikasi Vue.js, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <pagination
      :total="total"
      :current="current"
      :maxShown="maxShown"
      :prevText="prevText"
      :nextText="nextText"
      @onPageChanged="onPageChanged"></pagination>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import Pagination from './Pagination.vue';

export default {
  components: {
    Pagination
  },
  data () {
    return {
      current: 1,
      maxShown: 10,
      prevText: '上一页',
      nextText: '下一页',
      total: 10,
      pageSize: 10,
      items: [{ name: 'Item 1' }, { name: 'Item 2' }, { name: 'Item 3' }]
    }
  },
  methods: {
    onPageChanged (page) {
      console.log('Page changed to: ', page);
      // 当前页面数据请求
    }
  }
}
</script>

Dalam kod di atas, kami telah memperkenalkan komponen Penomboran dan menjadikannya komponen induk dalam templat. Kami juga mengikat jumlah, semasa dan maxShown kepada komponen untuk mendapatkan nilainya. Dalam kaedah onPageChanged, kami boleh mengendalikan peristiwa perubahan halaman dan meminta data yang sepadan berdasarkan nombor halaman semasa.

Atas ialah kandungan terperinci Amalan komponen Vue: pembangunan komponen halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!