文档章节

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

G
 GreatWall2017
发布于 2017/05/04 11:21
字数 759
阅读 36
收藏 0
点赞 0
评论 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
博文 23
码字总数 11916
作品 0
深圳
Vue-cli(三) 项目中引入Element

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

阿刚ABC ⋅ 04/19 ⋅ 0

vue2.0-基于elementui换肤[自定义主题]

直接上 预览链接 vue2.0-基于elementui换肤[自定义主题] 1. 项目增加主题组件 在项目的src/components下添加skin文件夹 skin文件获取地址(https://github.com/mgbq/vue-permission/tree/mast...

mgbq ⋅ 05/03 ⋅ 0

SanicCRUD-vue 0.1发布, Python 全栈开发实践

本项目将使用Sanic + Vue2 + Webpack2 配合最简单CRUD的逻辑,从工程组织、编码、测试、前、后端构建、接口交互等来诠释一个基于Python的全新一代高性能全栈开发实践的Demo, 具备的功能(v0...

boylegu ⋅ 2017/06/19 ⋅ 2

Flex分页组件--Pagination

基于Flex SDK 4.6.x + page4as3lib的一套分页组件 : Pagination for Flex 基于Flex SDK 4.6.x; 分页逻辑基于page4as3lib; 高度定制化分页参数(依照UI/UE的设计思想);...

王磊-Kenshin ⋅ 2012/08/20 ⋅ 1

v-page 1.3.0 发布,基于 Vue2 的简洁高效的独立分页组件

v-page 1.3.0版本发布,基于Vue2的简洁高效的独立分页组件 更新内容: 1.3.0: 修复插件页码在部分情况下会消失的问题 1.2.0: 增加插件初始化时就触发分页请求功能 调整内容显示为模板处理 ...

TerryZ ⋅ 04/28 ⋅ 0

Vue国际化处理 vue-i18n 以及项目自动切换中英文

直接上 预览链接 Vue国际化处理 vue-i18n 以及项目自动切换中英文 1. 环境搭建 命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n npm install vue-i18n --save 2. 项目增加国际化翻...

mgbq ⋅ 05/03 ⋅ 0

Vue 新手学习实战宝典

Vue.js 实践和应用相关的内容太丰富了,整理成这个目录和分类,想研究哪方面的,随便自取,玩得开心~ 实践: Vue.js 开发实践系列 by @aryu (1)实现精巧的无限加载与分页功能 (2)实现多条...

楠木楠 ⋅ 2016/12/01 ⋅ 0

Phalcon PHP Framework 1.1 正式版发布

经历多个beta发布版本后,Phalcon 1.1正式发布! 此版本增加了一些新的功能,修正以及改善了目前的组件,大大提升了性能。我们一直在不断的寻找性能与功能之间的最佳平衡,建立一个可靠的PHP...

netstu_ ⋅ 2013/05/08 ⋅ 23

web项目脚手架--Rapid Framework

基于spring,struts(struts2),hibernate的web项目脚手架 一个类似 ruby on rails 的java web快速开发脚手架,本着不重复发明轮子的原则,框架只是将零散的struts(struts2)+spring+hibernate各个...

匿名 ⋅ 2009/04/28 ⋅ 4

用户界面框架jQuery EasyUI示例大全之切换按钮和分页演示

<jQuery EasyUI最新试用版免费下载> jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件,助您打造适合...

Miss_Hello_World ⋅ 2016/09/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

存储,对比私有云和公有云的不同

导读 说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此,它还是具备着简单和固有的可用性。公共存储的名字听起来也缺乏专有性,很像是把东西直接堆放在那里而不会得到...

问题终结者 ⋅ 昨天 ⋅ 0

C++难点解析之const修饰符

C++难点解析之const修饰符 c++ 相比于其他编程语言,可能是最为难掌握,概念最为复杂的。结合自己平时的C++使用经验,这里将会列举出一些常见的难点并给出相应的解释。 const修饰符 const在c...

jackie8tao ⋅ 昨天 ⋅ 0

聊聊spring cloud netflix的HystrixCommands

序 本文主要研究一下spring cloud netflix的HystrixCommands。 maven <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-clo......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部