Vue-Komponentenpraxis: Entwicklung von Paging-Komponenten

Vue-Komponentenpraxis: Entwicklung von Paging-Komponenten

Einführung

In Webanwendungen ist die Paging-Funktion eine wesentliche Komponente. Eine gute Paginierungskomponente sollte einfach und klar in der Darstellung sein, reich an Funktionen und leicht zu integrieren und zu verwenden sein.

In diesem Artikel stellen wir vor, wie Sie mit dem Vue.js-Framework eine hochgradig anpassbare Paging-Komponente entwickeln. Wir erklären anhand von Codebeispielen ausführlich, wie man mit Vue-Komponenten entwickelt.

Technologie-Stack

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

Entwicklungsumgebung

• Node.js v8.9.3
• npm. v5.5.1
• V ue.js v2 .5.2

Paginierungskomponentenanforderungen

• Erhalten Sie die Gesamtzahl der Seiten (gesamt) und die aktuelle Anzahl der Seiten (aktuell) über Requisiten.
• Sie können die maximale Anzahl der angezeigten Seiten konfigurieren (max. Gezeigt). Konfigurieren Sie den von der Schaltfläche angezeigten Text (vorheriger Text und nächster Text) und den Schaltflächenstil.
• Klicken Sie auf die Seitenzahl, um zur entsprechenden Seite zu wechseln. Die aktuelle Seitenzahl wird hervorgehoben.
• Wenn die aktuelle Seite keine vorherige Seite hat, klicken Sie auf Ereignis der Schaltfläche „Vorherige Seite“ wird ignoriert
• Wenn die aktuelle Seite keine nächste Seite hat, ignorieren Sie das Klickereignis der Schaltfläche „Nächste Seite“
• Designideen und Codeimplementierung
• Je nach Bedarf teilen wir die Paging-Komponente auf zur Implementierung in mehrere kleine Komponenten zerlegen. Wir müssen die folgenden drei kleinen Komponenten erstellen:

Pagination.vue

Haupt-Paging-Komponente, die für die Verarbeitung von Paginierungsdaten und -logik verantwortlich ist. Übergeben Sie Paging-Informationen an untergeordnete Komponenten und reagieren Sie auf Ereignisse untergeordneter Komponenten.

Button.vue

Diese Komponente ist eine Schaltflächenkomponente, die zum Erstellen von Paging-Schaltflächen verwendet wird.

Page.vue

Diese Komponente wird verwendet, um einen einzelnen Seitenblock zu erstellen, einschließlich Seitenbezeichnung und Status. Ein Seitenblock kann die aktuelle Seite oder eine nicht aktuelle Seite sein.
3. Als nächstes verwenden wir Code, um die oben genannten 3 Komponenten zu implementieren.

Pagination.vue

<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>

Im obigen Code importieren wir zunächst die Komponenten ButtonPrev, ButtonNext und Page. Als nächstes werden die Attribute „total“, „current“, „maxShown“, „prevText“ und „nextText“ mithilfe von Requisiten abgerufen und die berechneten Attributseiten werden basierend auf der aktuellen Seitenzahl (current) und der maximalen Seitenzahl (maxShown) definiert, ein Array, das die Seitenzahl enthält wird zur Verwendung in der Komponente Present erhalten.
1. Wir definieren auch die Methode selectPage. Wenn die Seitenzahl (Seite) mit der aktuellen Seitenzahl (aktuell) übereinstimmt, wird zurückgegeben oder nichts unternommen. Andernfalls wird die neue Seitenzahl an die übergeordnete Komponente ausgegeben. Die Methoden

prev() und next() werden verwendet, um Ereignisse der vorherigen und nächsten Seite zu verarbeiten und zu verhindern, dass auf Ereignisse reagiert wird.

ButtonPrev.vue

<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>

Im obigen Code erhalten wir zunächst über Requisiten die aktuelle Seitenzahl (current) und die Textattribute (prevText) der Schaltfläche für die vorherige Seite. Verwenden Sie in der Vorlage die Klassenbindung (deaktiviert), um den Status der Schaltflächenverwendung zu steuern. Es wird eine onPrev-Methode definiert, die das onPrev-Ereignis der übergeordneten Komponente auslöst.

ButtonNext.vue

<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>

Im obigen Code haben wir den Code von ButtonPrev.vue kopiert und den Text und die Beurteilungsbedingungen leicht geändert.

Page.vue

<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>

Im obigen Code haben wir den Wert der Seitenzahl (Seite) und das isSelected-Attribut der Schaltfläche über Requisiten erhalten. Verwenden Sie in der Vorlage die Klassenbindung („aktuell“), um die ausgewählte Seite hervorzuheben.
4. Wir definieren außerdem eine onPageSelected-Methode, die das onPageSelected-Ereignis der übergeordneten Komponente auslöst.

Schließlich können diese Komponenten in einer Vorlage in jeder Vue.js-Anwendung verwendet werden, wie unten gezeigt:

<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>

Im obigen Code haben wir die Paginierungskomponente eingeführt und sie zu einer übergeordneten Komponente in der Vorlage gemacht. Wir binden außerdem total, current und maxShown an die Komponente, um deren Werte zu erhalten. In der onPageChanged-Methode können wir das Seitenwechselereignis verarbeiten und die entsprechenden Daten basierend auf der aktuellen Seitennummer anfordern.

Das obige ist der detaillierte Inhalt vonVue-Komponentenpraxis: Entwicklung von Paging-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!