首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用vue.js制作分页组件

Posted in Javascript onJune 27, 2016

学习了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制作分页组件

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用JavaScript页面不刷新时全选择，全删除（GridView）
Apr 14 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
bootstrap table之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）代码分享
Jan 24 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
vuex存储token示例
Nov 11 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
Vue实现todo应用的示例
Feb 20 Vue.js
js编写一个简单的产品放大效果代码
Jun 27 #Javascript
用JS实现轮播图效果（二）
Jun 26 #Javascript
用JS实现图片轮播效果代码（一）
Jun 26 #Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 #Javascript
jQuery滚动新闻实现代码
Jun 26 #Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 #Javascript
JS中的进制转换以及作用
Jun 26 #Javascript
默认端口(3) 二级域名(1) URL重定向(3) 443(1) 压力测试(1) lamp(1) 前后端分离(1) SSL(3) lnmp(1) 跨域(4)
You might like
SMARTY学习手记
2007/01/04 PHP
php miniBB中文乱码问题解决方法
2008/11/25 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
jquery ui resizable bug解决方法
2010/10/26 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
vuex入门最详细整理
2020/03/04 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
python3.x上post发送json数据
2018/03/04 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
什么是python类属性
2020/06/10 Python
全球速卖通法国在线交易平台：AliExpress法国
2017/07/07 全球购物
美国最佳在线航班预订网站：LookupFare
2019/03/26 全球购物
什么是触发器(trigger)? 触发器有什么作用？
2013/09/18 面试题
环境工程大学生个人的自我评价
2013/10/08 职场文书
家长评语大全
2014/01/22 职场文书
职工运动会感言
2014/02/07 职场文书
承诺书的格式范文
2014/03/28 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
继承权公证书范本
2015/01/23 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
中职班主任培训心得体会
2016/01/07 职场文书