100 строк кода для реализации компонента пейджинга vue

внешний интерфейс GitHub Vue.js jQuery

Сегодня vue используется для реализации компонента подкачки, вообще говоря, реализация vue относительно проста, а часть стиля имитирует elementUI. Исходный код всех кодов можно скачать с github по адресу:ссылка на скачиваниеДавайте посмотрим на эффект реализации:

实现效果
Нажмите, чтобы посмотреть эффект

вся идея

Давайте сначала посмотрим на каталог используемых файлов:

目录
мы вpageComponentsTest.vueстраница представленаpageComponent.vueКомпонент пагинации. Общая идея черезpropsДля достижения гибкого и общего эффекта компонентов общий синтаксис заключается в использовании синтаксиса виртуальной машины vue.

Реализация pageComponent.vue

Во-первых, для реализации нумерации страниц вам необходимо знать общее количество данных, количество данных, отображаемых на странице, и данные текущей отображаемой страницы. тогда мыpageComponent.vueвнутриpropsВот оно. См. код ниже:

props: {
      // 分页配置
      pageConfig: {
        type: Object, require: true, default() {
          return {
            pageSize: 10,     //一页的数据条数
            pageNo: 0,        //当前页的索引
            total: 0,         //总的数据条数
            pageTotal: 0      //总的页数
          }
        }
      }

На основе пользовательского ввода мы можем использовать вычисляемое свойство для вычисления переменной для общего количества страниц:

computed: {
      //计算总页数，如果传了pageTotal,直接取pageTotal的值，如果传了total，那么根据pageSize去计算
      pageTotal(){
        const config = this.pageConfig
        if(config.pageTotal){
          return config.pageTotal
        }else {
          if(config.pageSize && config.total){
            return Math.ceil(config.total/config.pageSize)
          }else {
            return 0
          }
        }
      }
    }

При общем количестве страниц и текущей странице нужны различные суждения для реализации нашей html части.Вот 4 случая.

  1. Общее количество страниц меньше 8, просто перейдите к 8 напрямую.
  2. Общее количество страниц больше 8, но текущая страница меньше 4.
  3. Общее количество страниц больше 8, а текущая страница находится сзади.
  4. Общее количество страниц больше 8, а текущая страница находится посередине. Давайте посмотрим на конкретную реализацию:
<!--上一页-->
      <button @click="prePage" :disabled="currentPage === 1">上一页</button>
      <!--总页数小于8的-->
      <template v-if="pageTotal <= showPageNo">
        <button v-for="i in pageTotal" @click="changeCurrentPage(i)" :class="{active:i === currentPage}" :key="i">{{i}}</button>
      </template>
      <template v-else-if="currentPage < 4">
        <button v-for="i in 6" @click="changeCurrentPage(i)" :class="{active:i === currentPage}" :key="i">{{i}}</button>
        <button :disabled="true">···</button>
        <button>{{pageTotal}}</button>
      </template>
      <template v-else-if="currentPage > pageTotal - 4">
        <button>1</button>
        <button :disabled="true">···</button>
        <button v-for="i in 6" @click="changeCurrentPage(i + (pageTotal - 6))" :class="{active:(i + (pageTotal - 6)) === currentPage}" :key="i">{{i + (pageTotal - 6)}}</button>
      </template>
      <template v-else>
        <button>1</button>
        <button :disabled="true">···</button>
        <button @click="changeCurrentPage(currentPage - 2)">{{currentPage - 2}}</button>
        <button @click="changeCurrentPage(currentPage - 1)">{{currentPage - 1}}</button>
        <button class="active">{{currentPage}}</button>
        <button @click="changeCurrentPage(currentPage + 1)">{{currentPage + 1}}</button>
        <button @click="changeCurrentPage(currentPage + 2)">{{currentPage + 2}}</button>
        <button :disabled="true">···</button>
        <button @click="changeCurrentPage(pageTotal)">{{pageTotal}}</button>
      </template>
      <!--下一页-->
      <button @click="nextPage" :disabled="currentPage === pageTotal">下一页</button>

Видно, что на странице нужно реализовать три метода, а именно верхнюю и нижнюю страницы и метод нажатия на страницу.

methods: {
      prePage(){
        this.currentPage -= 1
        this.$emit('changeCurrentPage',this.currentPage)
      },
      nextPage(){
        this.currentPage += 1
        this.$emit('changeCurrentPage',this.currentPage)
      },
      changeCurrentPage(i){
        this.currentPage = i
        this.$emit('changeCurrentPage',this.currentPage)
      }
    }

ВышеупомянутоеpageComponent.vueЭто примерно реализовано, каждый раз, когда страница меняется, она вызываетchangeCurrentPageОбратный вызов метода для уведомления страницы, в настоящее время использующей компонент, об изменении текущей страницы.

Реализация pageComponentsTest.vue

Справочная страница относительно проста, если переданы соответствующие параметры, требуемые компонентом, наш компонент может отображаться. Раздел цитирования:

<template>
  <div class="pageComponentsTest">
    <page-component :page-config="pageConfigTotal" @changeCurrentPage="changePage"></page-component>
    <page-component :page-config="pageConfigPageTotal"></page-component>
  </div>
</template>

С входной частью:

{
    name: "pageComponentsTest",
    data() {
      return {
        pageConfigTotal:{total:21,pageSize:10,pageNo:1},
        pageConfigPageTotal:{total:21,pageSize:10,pageNo:1,pageTotal:50}
      }
    },
    components:{'page-component':pageComponent},
    methods: {
      changePage(page){
        this.pageConfigTotal.pageNo = page
      }
    }
  }
Суммировать

Можно видеть, что использование vue для реализации компонентов подкачки в целом очень просто, что намного удобнее, чем использование jQuery.Наиболее очевидным преимуществом использования режима vm для разработки внешнего интерфейса является то, что часть режима данных может храниться в синхронизировать с частью страницы просмотра, и разработчик Не думайте об этом процессе, так что в целом это намного проще. Весь исходный код можно найти вскачать на гит. Наконец, вы можете следить за моей личной общедоступной учетной записью, чтобы видеть больше и лучшие статьи в режиме реального времени:

公众号

Категории