使用vue.js製作分頁組件_javascript類庫

學習了vue.js一段時間，拿它來做2個小工具，練習一下。
我這邊是用webpack進行打包，也算熟悉一下它的運用。
源碼放在文末的 github 地址上。

首先是index.html

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

我將 app這個組件放在 <div id='main'></div> 內
通過webpack打包後,入口的js檔案是entry.js，用來引入app.vue組件
entry.js

let Vue = require('vue');import App from './components/app';let app_vue = new Vue({ el: '#main', 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 './comment'; import Page from './page'; export default {  data () {   return {    curPageIndex: 1,    eachPageSize: 7,   }  },  components: {   comment: Comment,   page: Page  }, }</script>

它有2個子組件，分別是comment.vue和page.vue，通過動態綁定資料，進行父子間組件通訊，我是這樣認為的，對於 當前在第幾頁 應當由 page.vue傳遞給app.vue，所以這裡我們使用 雙向繫結,其餘的如 params, url, isSync，即向後台請求資料的東西以及是否同步或非同步作業<當然，這裡我還沒有測試過後台資料，目前是直接js產生待用資料>。

接下來,看下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="{'comt-mask': loading}">  <h3 class='comt-title'>{{ totalCommentCount }} 條評論</h3>  <div class="comt-line"></div>  <div class="comt-wrap" v-for="comment of commentArr">   <div class="comt-user">    <img src='{{ comment.avatar }}' 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 './getData'; export default {  props: {   curPageIndex: {    type: Number,    default: 1,   },   eachPageSize: {    type: Number,    default: 7,   },   commentUrl: {    type: String,    default: '',   },   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='$index' :class="{'page-btn': true, 'page-btn-active':    this.curPageIndex === pageIndex, 'page-btn-link': checkNum(pageIndex)}"    @click="clickPage(pageIndex)" >    {{ pageIndex }}  </button>   </div></template><script type="text/javascript"> import {getTotalPageCount} from './getData'; 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: '',   },   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('...');     }     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('...');     }     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: '', 頭像//  name: '', 使用者名稱//  context: '', 評論內容// }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 = '', 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 = '', params = null, isSync = true) { /* ajax */ return dataArr.length;}export function getTotalPageCount(url = '', params = null, isSync = true, eachPageSize = 7) { /* ajax */ return Math.floor((dataArr.length + eachPageSize -1 ) / eachPageSize);}

就這樣了吧。

github地址