欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用vue.js制作分頁(yè)組件

 更新時(shí)間：2016年06月27日 08:55:54   投稿：hebedich  
本文給大家分享的是個(gè)人在使用vue.js制作的文章和評(píng)論的分頁(yè)組件，并使用webpack打包起來(lái)，這里推薦給大家，有需要的小伙伴可以參考下

學(xué)習(xí)了vue.js一段時(shí)間，拿它來(lái)做2個(gè)小組件，練習(xí)一下。
我這邊是用webpack進(jìn)行打包，也算熟悉一下它的運(yùn)用。
源碼放在文末的 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>
   文章內(nèi)容...
  </article>
  <div id='main'>
   <app></app>  
  </div>
 </div>
 <script type="text/javascript" src='bundle.js'></script>
</body>
</html>

我將 app這個(gè)組件放在 <div id='main'></div> 內(nèi)
通過(guò)webpack打包后,入口的js文件是entry.js，用來(lái)引入app.vue組件
entry.js

let Vue = require('vue');

import App from './components/app';

let app_vue = new Vue({
 el: '#main',
 components: {
  app: App
 }
});

接下來(lái)看下這個(gè)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個(gè)子組件，分別是comment.vue和page.vue，通過(guò)動(dòng)態(tài)綁定數(shù)據(jù)，進(jìn)行父子間組件通信，我是這樣認(rèn)為的，對(duì)于 當(dāng)前在第幾頁(yè) 應(yīng)當(dāng)由 page.vue傳遞給app.vue，所以這里我們使用 雙向綁定,其余的如 params, url, isSync，即向后臺(tái)請(qǐng)求數(shù)據(jù)的東西以及是否同步或異步操作<當(dāng)然，這里我還沒(méi)有測(cè)試過(guò)后臺(tái)數(shù)據(jù)，目前是直接js生成靜態(tài)數(shù)據(jù)>。

接下來(lái),看下comment.vue評(píng)論組件

<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 }} 條評(píng)論</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 將在下面提到，是我們獲取數(shù)據(jù)的位置。
loading: 本意是在跳轉(zhuǎn)頁(yè)碼加載評(píng)論時(shí)，對(duì)于當(dāng)前評(píng)論加載0.5的透明度的遮罩，然后ajax通過(guò)它的回調(diào)函數(shù)來(lái)取消遮罩，現(xiàn)在這樣就不能實(shí)現(xiàn)了，只能強(qiáng)行寫下，然而是沒(méi)有用的..
hasComment: comment組件第一次加載的時(shí)候，我們就去請(qǐng)求獲得總共的數(shù)據(jù)長(zhǎng)度，如果沒(méi)有數(shù)據(jù)，則不顯示comment組件布局內(nèi)容
·curPageIndex·: 通過(guò)父組件app傳遞下來(lái)，使用的是props
這些數(shù)據(jù)，我們都設(shè)置一個(gè)默認(rèn)值與類型比較好。
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>

主要是個(gè)對(duì)于 組件事件的運(yùn)用，=最常見(jiàn)的click事件，以及class與style的綁定，根據(jù) curPageIndex與this.pageIndex來(lái)比較，判斷是否擁有這個(gè)class,通過(guò)computed計(jì)算屬性，來(lái)獲得 頁(yè)碼數(shù)組 因?yàn)闀?huì)根據(jù)當(dāng)前頁(yè) 有所變化，created的時(shí)候 計(jì)算出總頁(yè)碼。
最后一個(gè)是 目前生成獲取靜態(tài)數(shù)據(jù)的js文件.

// let data = {
//  avatar: '', 頭像
//  name: '', 用戶名
//  context: '', 評(píng)論內(nèi)容
// }
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地址

相關(guān)文章

最新評(píng)論