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

来源：互联网发布：摄影网络教学编辑：程序博客网时间：2024/06/01 07:29

基于vue2.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地址
github地址

文章如有误之处烦请指正谢谢

by 冷无缺

标

阅读全文

0 0