使用vue.js制作分页组件

程序员文章站 2022-06-12 08:18:39

学习了vue.js一段时间，拿它来做2个小组件，练习一下。我这边是用webpack进行打包，也算熟悉一下它的运用。源码放在文末的 github 地址上。首先是i...

学习了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);
}

就这样了吧。

上一篇： Kendo UI dropdownlist 获取选中数据

下一篇：非常漂亮脑残教得太差

使用vue.js制作分页组件

atom-design(Vue.js移动端组件库)手势组件使用教程

Vue开发之封装分页组件与使用示例

atom-design(Vue.js移动端组件库)手势组件使用教程

Vue开发之封装分页组件与使用示例

asp.net mvc4 mysql制作简单分页组件（部分视图）

vue.js内置组件之keep-alive组件使用

YII2框架中分页组件的使用方法示例

Vue.js组件使用开发实例教程

vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

Vue.js实现一个自定义分页组件vue-paginaiton