文档章节

基于vue2.0的一个分页组件

G
 GreatWall2017
发布于 2017/05/04 11:21
字数 759
阅读 46
收藏 0

分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能。于是百度发现几篇文章介绍的实在方式有点复杂,
没耐心看自己动手造轮子写了一个,用vue的计算属性去实现真正的逻辑代码大约在20行左右相当好理解现实原理简单没什么好介绍的直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue-router</title>

  <script src="./vue.js" ></script>
  <style>
  body{
      font-family:"Segoe UI";
    }
    li{
      list-style:none;
    }
    a{
      text-decoration:none;
    }
    .pagination {
        position: relative;

      }
      .pagination li{
        display: inline-block;
        margin:0 5px;
      }
      .pagination li a{
        padding:.5rem 1rem;
        display:inline-block;
        border:1px solid #ddd;
        background:#fff;

        color:#0E90D2;
      }
      .pagination li a:hover{
        background:#eee;
      }
      .pagination li.active a{
        background:#0E90D2;
        color:#fff;
      }
  </style>
</head>
<body>
    <script type="text/x-template" id="page">
        <ul class="pagination" >
            <li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一页</a></li>
            <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
              <a href="#" >{{index}}</a>
            </li>
            <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li>
        </ul>
    </script>
    <div id="app">
          <page></page>
    </div>





<script>

  Vue.component("page",{
      template:"#page",
        data:function(){
          return{
            current:1,
            showItem:5,
            allpage:13
          }
        },
        computed:{
          pages:function(){
                var pag = [];
                  if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
                       //总页数和要显示的条数那个大就显示多少条
                       var i = Math.min(this.showItem,this.allpage);
                       while(i){
                           pag.unshift(i--);
                       }
                   }else{ //当前页数大于显示页数了
                       var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
                           i = this.showItem;
                       if( middle >  (this.allpage - this.showItem)  ){
                           middle = (this.allpage - this.showItem) + 1
                       }
                       while(i--){
                           pag.push( middle++ );
                       }
                   }
                 return pag
               }
      },
      methods:{
        goto:function(index){
          if(index == this.current) return;
            this.current = index;
            //这里可以发送ajax请求
        }
      }
    })

var vm = new Vue({
  el:'#app',
})



</script>
</body>
</html>

 

在线Demo地址:https://jslife23.github.io/vue-page/index.html

Github地址:https://github.com/JSlife23/vue-page/tree/master

 

第二种:

<style lang="stylus">
.pagination
    margin 0
.pagination-info
    padding 6px 12px
    border 1px solid #ccc
    border-radius 4px
</style>
<template>
    <div class="row clearfix">
        <div class="col-xs-7">
            <ul class="pagination clearfix">
                <!-- 左侧切换 -->
                <li :class="{'disabled': pageData.currentPage<=1}">
                    <a href="javascript:void(0)" aria-label="Previous" @click="selectPage(pageData.currentPage-1, pageData.currentPage<=1)">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>

                <!-- 中间 -->
                <li v-for="n in pageShowArray"  :class="{'pageOne': true, 'active': n==pageData.currentPage}">
                    <a href="javascript:void(0)" @click="selectPage(n, n==pageData.currentPage)">{{n}}</a>
                </li>

                <li :class="{'disabled': pageData.currentPage>=pageData.totalPage}">
                    <a href="javascript:void(0)" aria-label="Next" @click="selectPage(pageData.currentPage+1, pageData.currentPage>=pageData.totalPage)">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-xs-2">
            <div class="input-group clearfix goto-div">
                <input type="text" class="form-control" value="{{goToNum}}" v-model="goToNum">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" @click="gotoPage()    ">跳转</button>
                </span>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="pagination-info">当前第{{pageData.currentPage}}页/总共{{pageData.totalPage}},每页{{pageData.perPageNum}}条</div>
        </div>
    </div>
</template>

<script>

    export default {
        props: {
            pageData: {
                type: Object,
                require: true
            }
        },
        ready () {

        },

        created () {
            let self = this

            self.insertPage()

            self.$watch('pageData.currentPage', function(val) {
                self.insertPage()
            })
            self.$watch('pageData.totalPage', function(val) {
                self.insertPage()
            })
        },

        data () {
            return {
                goToNum: 1,
                pageShowArray: []
            }
        },

        methods: {
            insertPage () {
                let self = this
                self.pageShowArray = []
                if(self.pageData.totalPage<=8 || self.pageData.currentPage<=4) {
                    let nowTotalPage = self.pageData.totalPage>8?8:self.pageData.totalPage
                    for(let i=1;i<=nowTotalPage;i++) {
                        self.pageShowArray.push(i);
                    }
                } else {
                    if(self.pageData.currentPage>4&&self.pageData.currentPage<=self.pageData.totalPage-4) {
                        for(let i=self.pageData.currentPage-3;i<=self.pageData.currentPage+4;i++) {
                            self.pageShowArray.push(i);
                        }
                    } else {
                        for(let i=self.pageData.totalPage-7;i<=self.pageData.totalPage;i++) {
                            self.pageShowArray.push(i);
                        }
                    }
                }
            },

            gotoPage () {
                let thisNum = parseInt(this.goToNum)
                if(thisNum > this.pageData.totalPage) {
                    this.badPageSelect(2)
                } else {
                    if(thisNum != this.pageData.currentPage) {
                        this.selectPageByNum(thisNum)
                    }
                }
            },

            selectPage (num, type) {
                if(!type) {
                    let thisNum = parseInt(num)
                    this.selectPageByNum(thisNum)
                }
            },

            badPageSelect (status) {
                this.$dispatch('bad-page-select', status)
            },

            selectPageByNum (num) {
                this.$dispatch('page-back-num', num)
            }
        }
    }

</script>

 

参考网址:http://www.tuicool.com/articles/qEbeYzN

本文转载自:http://www.cnblogs.com/cqsjs/p/5772834.html?utm_source=itdadao&utm_medium=referral

共有 人打赏支持
G
粉丝 0
博文 25
码字总数 13402
作品 0
深圳
私信 提问
Vue-cli(三) 项目中引入Element

Element是一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库,提供了配套设计资源,帮助你的网站快速成型。在项目中自己写组件虽然灵活,但是效率并不高效,所以要学会站在巨人的肩膀...

阿刚ABC
04/19
0
0
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具

在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后...

凤囚凰丶
06/06
0
0
在线文档编辑前端开发

一、项目概况 1、学习组件封装,包含测试题、案例、知识要点3个组件。 2、编辑器页面及页面组件封装。 3、canvas编辑器的前端集成和少量迭代优化。 4、课件文档PPTX、PDF的生成下载。 三、要...

zb1499514427945
2017/07/27
0
0
vue实现首屏加载等待动画 避免首次加载白屏尴尬

0 直接上效果图 1背景,用户体验良好一直是个重要的问题。 2怎么加到自己项目里面? 复制css html代码到自己的index.html即可 代码链接(https://github.com/mgbq/nx-admin/blob/master/index...

mgbq
06/27
0
0
基于 jQuery 的 JavaScript 分页组件 - Pagination

Pagination 是一个基于 jQuery 实现的一个简单的 JavaScript 分页组件,主要实现以下功能: 1. 方便在 JavaScript 中对后端分页数据进行展示 2. 自动生成分页组件,包括首页、页码、末页、页...

勤劳的小木匠
07/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

函数计算工具链新成员 —— Fun Local 发布啦

刚刚,我们发布了函数计算工具链的新成员,Fun Local。欢迎大家使用! 如果你还不了解 Fun 是什么,我们来简单解释下。 Fun 是什么 Fun 是 have Fun with Serverless 的缩写,是一款 Server...

阿里云官方博客
14分钟前
1
0
Linux下实现 OpenSSL 简单加密与解密字符串

场景 shell脚本中存在明文密码 客户要求禁止使用明文密码,密码做加密处理. 方案 在网上了解到了Linux OpenSSL加密解密工具 可以指定各种加密算法为字符,文件做加密处理. 加密的案例比较多,解...

问题终结者
16分钟前
1
0
ActiveMQ 消息中间件

什么是ActiveMQ ActiveMQ是Apache出品,能力强劲的开源消息总线。ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,尽管JMS规范出台已经是很久的事情了,但是JMS在当今的J2E...

ashuo
21分钟前
2
0
详解ECMAScript typeof用法

typeof 返回变量的类型字符串值 、其中包括 “object”、“number”、“string”、“undefined”、“boolean”、 1、在变量只声明、却不初始化值 Or 在变量没有声明时 返回 “undefined” > ...

peakedness丶
22分钟前
1
0
函数计算性能福利篇(二) —— 业务冷启动优化

继前一篇《函数计算性能福利篇——系统冷启动优化》,我们再来看看近期函数计算推出的 Initializer 功能之后,带来的一波高能性能优化成果。 背景 函数计算是一个事件驱动的全托管 serverle...

阿里云云栖社区
27分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部