ホームページ > 記事 > ウェブフロントエンド > vue.js を使用してページングコンポーネントを作成する

vue.js を使用してページングコンポーネントを作成する

高洛峰オリジナル: 2017-01-16 11:55:101113ブラウズ

私はしばらくの間 vue.js を勉強しており、それを使用して 2 つの小さなコンポーネントを作成して練習しました。
ここではパッケージ化に webpack を使用しているので、その使い方には慣れています。
ソースコードは記事の最後にあるgithubアドレスにあります。

最初はindex.html

<!DOCTYPE html>
<html>
<head>
 <title>Page</title>
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
   font-family: &#39;Open Sans&#39;, Arial, sans-serif;
  }
  .contianer {
   width: 50%;
   height: auto;
   margin: 20px auto;
  }
  article {
   margin-bottom: 50px;
  }
 </style>
</head>
<body>
 <div class=&#39;contianer&#39;>
  <article>
   文章内容...
  </article>
  <div id=&#39;main&#39;>
   <app></app> 
  </div>
 </div>
 <script type="text/javascript" src=&#39;bundle.js&#39;></script>
</body>
</html>

です

アプリコンポーネントをc0d5f5130fcd018cc117943bd2c43ff616b28748ea4df4d9c2150843fecfba68に配置します
webpackを介してパッケージ化した後、エントリjsファイルはentry.jsです。 app.vue コンポーネントを導入します
entry.js

let Vue = require(&#39;vue&#39;);
 
import App from &#39;./components/app&#39;;
 
let app_vue = new Vue({
 el: &#39;#main&#39;,
 components: {
  app: App
 }
});

次に、このアプリコンポーネントを見てみましょう

<style type="text/css" scoped>
  
</style>
 
<template>
 <comment :cur-page-index="curPageIndex" :each-page-size="eachPageSize" :comment-url="commentUrl"
  :comment-params="commentParams" :comment-is-sync="commentIsSync">
   
 </comment>
 <page :cur-page-index.sync="curPageIndex" :each-page-size="eachPageSize" :page-url="pageUrl"
  :page-params="pageParams" :page-is-sync="pageIsSync">
 
 </page>
</template>
 
<script type="text/javascript">
 import Comment from &#39;./comment&#39;;
 import Page from &#39;./page&#39;;
 
 export default {
  data () {
   return {
    curPageIndex: 1,
    eachPageSize: 7,
   }
  },
  components: {
   comment: Comment,
   page: Page
  },
 }
</script>

これには、comment.vue と page.vue という 2 つのサブコンポーネントがあります。動的にバインドされたデータです。親と子間のコンポーネント通信の場合、このようにして、現在のページをpage.vueからapp.vueに渡す必要があると思います。そのため、ここでは双方向バインディングを使用し、残りはparams、urlなどです、 isSync、つまり、データのバックグラウンドリクエストとは何ですか、そしてそれが同期的に動作するか非同期的に動作するかについてです。

次に、comment.vue コメントコンポーネントを見てください

<style type="text/css" scoped>
 .comt-mask {
  opacity: 0.5;
 }
 .comt-title {
   
 }
 .comt-line {
  width: 100%;
  height: 2px;
  background-color: #CCC;
  margin: 10px 0;
 }
 .comt-wrap {
   
 }
 .comt-user {
  float: left;
 }
 .comt-img {
  width: 34px;
  height: 34px;
  border-radius: 17px;
 }
 .comt-context {
  margin: 0 0 0 60px;
 }
 .comt-name {
  color: #2B879E;
  margin-bottom: 10px;
  font-size: 18px;
 }
</style>
 
<template>
 <div v-if="hasComment" :class="{&#39;comt-mask&#39;: loading}">
  <h3 class=&#39;comt-title&#39;>{{ totalCommentCount }} 条评论</h3>
  <div class="comt-line"></div>
  <div class="comt-wrap" v-for="comment of commentArr">
   <div class="comt-user">
    <img src=&#39;{{ comment.avatar }}&#39; class="comt-img"/>
   </div>
   <div class="comt-context">
    <p class="comt-name">{{ comment.name }}</p>  
    <p>
     {{ comment.context }}
    </p>
   </div>
   <div class="comt-line"></div>
  </div>
 </div>
</template>
 
<script type="text/javascript">
 import {getCommentData, getTotalCommentCount} from &#39;./getData&#39;;
 
 export default {
  props: {
   curPageIndex: {
    type: Number,
    default: 1,
   },
   eachPageSize: {
    type: Number,
    default: 7,
   },
   commentUrl: {
    type: String,
    default: &#39;&#39;,
   },
   commentParams: {
    type: Object,
    default: null,
   },
   commentIsSync: {
    type: Boolean,
    default: true,
   },
  },
  data () {
   return {
    totalCommentCount: 0,
    hasComment: false,
    loading: true,  
   }
  },
  computed: {
   commentArr () {
    this.loading = true;
    let res = getCommentData(this.commentUrl, this.commentParams, this.commentIsSync, this.curPageIndex, this.eachPageSize);
    this.loading = false;
    return res;
   },
  },
  created () {
   let cnt = getTotalCommentCount(this.commentUrl, this.commentParams);
   this.totalCommentCount = cnt;
   this.hasComment = cnt > 0;
  }
 }
</script>

ここでの getData.js については後述しますが、ここでデータを取得します。
loading: 本来の目的は、コメントをロードするためにページ番号にジャンプするときに現在のコメントの 0.5 の透明度マスクをロードすることであり、その後、ajax はコールバック関数を通じてマスクをキャンセルします。現在、これは達成できず、強制的に書き込むことしかできません。ですが、これではダメです
hasComment: コメントコンポーネントの初回読み込み時に総データ長を要求します。データが無い場合、コメントコンポーネントのレイアウト内容は表示されません
·curPageIndex·: 渡されます。 props を使用して、親コンポーネント app を介してダウンします
これらのデータについては、デフォルト値と型を設定することをお勧めします。
page.vue

<style type="text/css" scoped>
 .page {
  text-align: center;
  margin: 30px;
 }
 .page-btn {
  color: gray;
  background-color: white;
  border: white;
  width: 30px;
  height: 30px;
  margin: 5px;
  font-size: 18px;
  outline: none;
 }
 .page-btn-link {
  cursor: Crosshair;
 }
 .page-btn-active {
  border: 1px solid gray;
  border-radius: 15px;
 }
</style>
 
<template>
 <div class="page">
  <button v-for="pageIndex of pageArr" track-by=&#39;$index&#39; :class="{&#39;page-btn&#39;: true, &#39;page-btn-active&#39;:
   this.curPageIndex === pageIndex, &#39;page-btn-link&#39;: checkNum(pageIndex)}"
   @click="clickPage(pageIndex)" >
    {{ pageIndex }}
  </button> 
 </div>
</template>
 
<script type="text/javascript">
 import {getTotalPageCount} from &#39;./getData&#39;;
 
 export default {
  props: {
   totalPageCount: {
    type: Number,
    default: 0,
   },
   curPageIndex: {
    type: Number,
    default: 1,
   },
   eachPageSize: {
    type: Number,
    default: 7,
   },
   pageAjcn: {
    type: Number,
    default: 4,
   },
   pageUrl: {
    type: String,
    default: &#39;&#39;,
   },
   pageParams: {
    type: Object,
    default: null,
   },
   pageIsSync: {
    type: Boolean,
    default: true,
   }     
  },
  data () {
   return {
 
   }
  },
  computed: {
   pageArr () {
    let st = 1,
     end = this.totalPageCount,
     cur = this.curPageIndex,
     ajcn = this.pageAjcn,
     arr = [],
     left = Math.floor(ajcn / 2),
     right = ajcn - left;
      
    if (end == 0 || cur == 0) {
     return arr;
    } else {
     console.log(st, end, cur, left, right);
     arr.push(st);
     console.log(st+1, cur-left);
     if (st + 1 < cur - left) {
      arr.push(&#39;...&#39;);
     }
     for (let i = Math.max(cur - left, st + 1); i <= cur - 1; ++i) {
      arr.push(i);
     }
     if (cur != st) {
      arr.push(cur);
     }
     for (let i = cur + 1; i <= cur + right && i <= end - 1 ; ++i) {
      arr.push(i);
     }
     if (cur + right < end - 1) {
      arr.push(&#39;...&#39;);
     }
     if (end != cur) {
      arr.push(end);
     }
     return arr;
    }
   }
  },
  methods: {
   clickPage (curIndex) {
    if (Number.isInteger(curIndex)) {
     this.curPageIndex = curIndex;
    }
   },
   checkNum (curIndex) {
    return Number.isInteger(curIndex);
   }  
  }，
  created () {
   this.totalPageCount = getTotalPageCount(this.pageUrl,  this.pageParams, this.pageIsSync,
    this.eachPageSiz);
  }
 }
</script>

は主にコンポーネントイベント、つまり最も一般的なクリックイベント、およびクラスとスタイルのバインディングのアプリケーションです。curPageIndex と this.pageIndex を比較して、このクラスがあるかどうかを判断し、それを計算します。 computed 属性を使用してページ番号配列を取得します。これは、現在のページに応じて変化し、作成時に合計ページ番号が計算されるためです。
最後は静的データを取得するためのjsファイルを生成中です

// let data = {
//  avatar: &#39;&#39;, 头像
//  name: &#39;&#39;, 用户名
//  context: &#39;&#39;, 评论内容
// }
let dataArr = [];
 
function randomStr (len) {
 return Math.random().toString(36).substr(len);
}
 
function initData () {
 for (var i = 0; i<45 ; ++i) {
  let _avator = "./resources/" + i%7 + ".jpg";
  let _name = randomStr(20);
  let _context = randomStr(2);
  dataArr.push({
   avatar: _avator,
   name: _name,
   context: _context
  });
 }
}
 
if (!dataArr.length) {
 initData();
}
 
export function getCommentData (url = &#39;&#39;, params = null, isSync = true, curPageIndex = 1, eachPageSize = 7) {
 /* ajax */
 let st = (curPageIndex - 1) * eachPageSize;
 let end = st + eachPageSize;
 
 return dataArr.slice(st, end);
}
 
export function getTotalCommentCount(url = &#39;&#39;, params = null, isSync = true) {
 /* ajax */
 return dataArr.length;
}
 
export function getTotalPageCount(url = &#39;&#39;, params = null, isSync = true, eachPageSize = 7) {
 /* ajax */
 return Math.floor((dataArr.length + eachPageSize -1 ) / eachPageSize);
}

以上です。

vue.js を使用したページングコンポーネントの作成に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Vue.js コンポーネントツリーは無限ツリーメニューを実装します次の記事：Vue.js コンポーネントツリーは無限ツリーメニューを実装します

続きを見る

vue.js を使用してページング コンポーネントを作成する

関連記事

vue.js を使用してページングコンポーネントを作成する