首頁 > 文章 > web前端 > 使用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>

我將app這個元件放在

內
透過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
 }
});

接下來看下這個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>

它有2個子組件，分別是綁定.vue和pagevue，透過動態資料父子間元件通信，我是這樣認為的，對於當前在第幾頁應當由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: comment組件第一次加載的時候，我們就去請求獲得總共的數據長度，如果沒有數據，則不顯示comment組件佈局內容
·curPageIndex·: 通過父組件app傳遞下來，使用的是props
這些數據，我們都設定一個預設值與類型比較好。
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>

主要是個對於組件事件的運用，=最常見的click事件，以及class與style的綁定，根據curPageIndex與this.pageIndex來比較，判斷是否擁有這個class,通過computed計算屬性，來獲得頁碼數組因為會根據當前頁有所變化，created的時候計算出總頁碼。
最後一個是目前產生取得靜態資料的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中文網！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Vue.js元件tree實作無限階樹狀選單下一篇：Vue.js元件tree實作無限階樹狀選單

看更多