通过vue.js组件实现的一个前端分页插件
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Vue分页组件</title>
<link rel="stylesheet" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
</head>
<body>
<div id="app" class="text-center" style="margin-top: 200px">
<navigation :pages="pages" :current.sync="pageNo" @navpage="msgListView"></navigation>
<p>当前是第<span v-text="pageNo"></span>页</p>
</div>
<script type="text/javascript" src="http://www.jq22.com/jquery/vue.min.js"></script>
<script type="text/javascript" src="js/pagination.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
pageNo: 1,
pages:15
},
methods:{
msgListView(curPage){
//根据当前页获取数据
this.pageNo = curPage;
}
}
})
</script>
</body>
</html>pagination.js文件
//分页组件
var pageComponent = Vue.extend({
template: `<nav>
<ul class="pagination">
<li :class="{\'disabled\':curPage==1}">
<a href="javascript:;" @click="goPage(curPage==1?1:curPage-1)" aria-label="Previous" >
<span aria-hidden="true">«</span>
</a>
</li>
<li v-for="page in showPageBtn" :class="{\'active\':page==curPage}" >
<a href="javascript:;" v-if="page" @click="goPage(page)" >{{page}}</a>
<a href="javascript:;" v-else >...</a>
<li>
<li :class="{\'disabled\':curPage==pages}">
<a href="javascript:;" @click="goPage(curPage==pages?pages:curPage+1)" aria-label="Next" >
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>`,
props: {
pages: {
type: Number,
default: 1,
},
current: {
type: Number,
default: 1,
},
},
data() {
return {
curPage: 1,
};
},
computed: {
//设置页码
showPageBtn() {
let pageNum = this.pages;
let index = this.curPage;
let arr = [];
if (pageNum <= 5) {
for (let i = 0; i <= pageNum; i++) {
arr.push(i);
}
return arr;
}
if (index <= 2) return [1, 2, 3, 0, pageNum];
if (index >= pageNum - 1)
return [1, 0, pageNum - 2, pageNum - 1, pageNum];
if (index === 3) return [1, 2, 3, 4, 0, pageNum];
if (index === pageNum - 2)
return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
return [1, 0, index - 1, index, index + 1, 0, pageNum];
}
},
methods: {
goPage(page) {
if (page != this.curPage) {
console.log(page);
this.curPage = page;
this.$emit('navpage', this.curPage);
} else {
console.log('Already in the current page');
}
}
}
});
Vue.component("navigation", pageComponent);