Vue コンポーネントの実践: ページング コンポーネントの開発

Vue コンポーネントの実践: ページング コンポーネントの開発

はじめに

Web アプリケーションでは、ページング関数は不可欠なコンポーネントです。優れたページング コンポーネントは、プレゼンテーションがシンプルかつ明確で、機能が豊富で、統合と使用が簡単である必要があります。

この記事では、Vue.js フレームワークを使用して高度にカスタマイズ可能なページング コンポーネントを開発する方法を紹介します。 Vueコンポーネントを使った開発方法をコード例を通して詳しく解説します。

テクノロジー スタック

• Vue.js 2.x
• JavaScript (ES6)
• HTML5 および CSS3

開発環境

• Node.js v8.9.3
• npm v5.5.1
• Vue.js v2.5.2

ページングコンポーネント要件

• props を通じて総ページ数 (total) と現在のページ数 (current) を受け取ります
• 表示される最大ページ数 (maxShown) を構成できます
• はい ボタンに表示されるテキスト (prevText および nextText) とボタン スタイルを設定します。
• ページ番号をクリックして、対応するページに切り替えます。
• 現在のページ番号が強調表示されます
• 現在のページに前のページがない場合、前ページ ボタンのクリック イベントを無視します
• 現在のページに次のページがない場合、次ページ ボタンのクリック イベントを無視します

設計のアイデアとコードの実装

要件に基づいて、ページング コンポーネントを実装のために複数の小さなコンポーネントに分割します。次の 3 つの小さなコンポーネントを作成する必要があります。

1. Pagination.vue

メインのページング コンポーネントは、ページング データとロジックの処理を担当します。ページング情報をサブコンポーネントに渡し、サブコンポーネントのイベントに応答します。

2. Button.vue

このコンポーネントはボタン コンポーネントであり、ページング ボタンの作成に使用されます。

3. Page.vue

このコンポーネントは、ページ ラベルとステータスを含む単一のページ ブロックを作成するために使用されます。ページ ブロックは、現在のページまたは非現在のページにすることができます。

次に、コードを使用して上記の 3 つのコンポーネントを実装してみましょう。

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

上記のコードでは、最初に ButtonPrev、ButtonNext、および Page コンポーネントをインポートしました。次に、props を使用して total、current、maxShown、prevText、nextText 属性を取得し、計算された属性ページを定義します。現在のページ番号 (current) と最大ページ番号 (maxShown) に基づいて、ページ番号を含む配列が定義されます。コンポーネントで使用するために取得されます。

また、selectPage メソッドも定義します。このメソッドでは、ページ番号 (page) が現在のページ番号 (current) と同じである場合、返すか何もしません。それ以外の場合、新しいページ番号が親コンポーネントに出力されます。

prev() メソッドと next() メソッドは、前ページと次ページのイベントを処理し、イベントが応答しないようにするために使用されます。

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

上記のコードでは、まず、現在のページ番号 (current) と前のページ ボタンのテキスト (prevText) 属性を取得します。小道具。テンプレートでは、クラス バインディング (無効) を使用してボタンの使用状態を制御します。 onPrev メソッドが定義されており、親コンポーネントの onPrev イベントをトリガーします。

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

上記のコードはButtonPrev.vueのコードをコピーし、本文と判定条件を少し変更しています。

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

上記のコードでは、props を通じてページ番号 (page) の値とボタンの isSelected 属性を取得します。テンプレートでは、クラス バインディング (「current」) を使用して、選択したページを強調表示します。

また、親コンポーネントの onPageSelected イベントをトリガーする onPageSelected メソッドも定義します。

最後に、これらのコンポーネントは、以下に示すように、任意の Vue.js アプリケーションのテンプレートで使用できます。

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

上記のコードでは、Pagination コンポーネントを導入し、テンプレートとして使用しました。の親コンポーネント。また、total、current、maxShown をコンポーネントにバインドして、それらの値を取得します。 onPageChanged メソッドでは、ページ変更イベントを処理し、現在のページ番号に基づいて対応するデータを要求できます。

以上がVue コンポーネントの実践: ページング コンポーネントの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。