JavaScript
搜索
分类

使用vue.js制作分页组件

作者：hebedich 时间：2024-05-02 16:36:27　

学习了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地址

标签：vue.js,分页
0
投稿

猜你喜欢

  • Python中字符串类型代码的执行函数——eval()、exec()和compile()详解

    2022-07-08 09:14:12

  • 验证码的最高境界

    2008-05-08 14:17:00

  • php 无限级 SelectTree 类

    2024-05-13 09:25:03

  • Python 利用pydub库操作音频文件的方法

    2022-12-12 05:42:53

  • Python爬取商家联系电话以及各种数据的方法

    2023-07-24 18:39:38

  • 详解在OpenCV中实现的图像标注技术

    2023-12-01 11:54:34

  • SQL Server 数据库分离与附加 就这么简单!

    2024-01-25 21:33:05

  • 解决每次打开pycharm直接进入项目的问题

    2021-05-08 00:27:45

  • 记录模型训练时loss值的变化情况

    2022-03-22 23:39:48

  • ie的javascript失效问题

    2009-09-21 12:49:00

  • Oracle中获取执行计划的几种方法分析

    2023-07-17 15:18:31

  • Select的OnChange()事件

    2009-03-03 12:40:00

  • python 提取视频中的音频工具类详解

    2023-08-15 06:10:26

  • MySQL常见错误有哪些_MySQL常见错误的快速解决方法

    2024-01-25 09:16:31

  • order by newid() 各种数据库随机查询的方法

    2024-01-19 16:53:14

  • 对MySQL慢查询日志进行分析的基本教程

    2024-01-22 20:32:35

  • 10个美观实用的 jQuery/Mootools 日历插件

    2009-09-17 13:03:00

  • pytorch中的 .view()函数的用法介绍

    2022-10-15 19:50:17

  • JavaScript学习笔记整理_用于模式匹配的String方法

    2024-06-05 09:53:02

  • Python中实现结构相似的函数调用方法

    2021-12-04 10:31:03
    • asp之家 网络编程 m.aspxhome.com