基于vue2.0的一个分页组件
分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能。于是百度发现几篇文章介绍的实在方式有点复杂，
没耐心看自己动手造轮子写了一个，用vue的计算属性去实现真正的逻辑代码大约在20行左右相当好理解现实原理简单没什么好介绍的直接上代码。
html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue-routertitle><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="{&＃39;active&＃39;: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:&＃39;#app&＃39;,
})</script>
body>
</html>
效果图
在线demo地址
github地址
文章如有误之处烦请指正谢谢
by 冷无缺
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 