页码跳转组件
新建Vue文件pagination.vue文件
<template>
<nav>
<ul class="pagination">
<li :class="{'disabled': current == 1}">
<a
href="javascript:;"
@click="setCurrent(1)"
>首页</a>
</li>
<li
v-for="p in grouplist"
:key="p"
:class="{'active': current == p.val}"
>
<a
href="javascript:;"
@click="setCurrent(p.val)"
>{{ p.text }}</a>
</li>
<!-- <li :class="{'disabled': current == page}">
<a href="javascript:;" @click="setCurrent(page)">尾页</a>
</li> -->
<li :class="{'disabled': current == 1}">
<a
href="javascript:;"
@click="setCurrent(current - 1)"
class="top"
>上一页</a>
</li>
<li :class="{'disabled': current == page}">
<a
href="javascript:;"
@click="setCurrent(current + 1)"
class="down"
>下一页</a>
</li>
</ul>
</nav>
</template>
<script type="es6">
export default {
data() {
return {
current: this.currentPage
};
},
props: {
total: {
// 数据总条数
type: Number,
default: 0
},
display: {
// 每页显示条数
type: Number,
default: 10
},
currentPage: {
// 当前页码
type: Number,
default: 1
},
pagegroup: {
// 分页条数
type: Number,
default: 5,
coerce: function(v) {
v = v > 0 ? v : 5;
return v % 2 === 1 ? v : v + 1;
}
}
},
computed: {
page: function() {
// 总页数
return Math.ceil(this.total / this.display);
},
grouplist: function() {
// 获取分页页码
var len = this.page,
temp = [],
list = [],
count = Math.floor(this.pagegroup / 2),
center = this.current;
if (len <= this.pagegroup) {
while (len--) {
temp.push({ text: this.page - len, val: this.page - len });
}
return temp;
}
while (len--) {
temp.push(this.page - len);
}
var idx = temp.indexOf(center);
idx < count && (center = center + count - idx);
this.current > this.page - count && (center = this.page - count);
temp = temp.splice(center - count - 1, this.pagegroup);
do {
var t = temp.shift();
list.push({
text: t,
val: t
});
} while (temp.length);
if (this.page > this.pagegroup) {
this.current > count + 1 &&
list.unshift({ text: "...", val: list[0].val - 1 });
this.current < this.page - count &&
list.push({ text: "...", val: list[list.length - 1].val + 1 });
}
return list;
}
},
methods: {
setCurrent: function(idx) {
if (this.current != idx && idx > 0 && idx < this.page + 1) {
this.current = idx;
this.$emit("pagechange", this.current);
}
}
}
};
</script>
<style lang="scss" scoped>
.pagination {
overflow: hidden;
display: table;
margin: 0 auto;
/*width: 100%;*/
height: 50px;
li {
float: left;
width: 65px;
height: 65px;
// border-radius: 5px;
border: 1px solid #dddddd;
margin: 0px 5px;
text-align: center;
line-height: 65px;
// color: #666;
& :hover {
background: #ffd050;
a {
color: #fff;
}
}
a {
display: block;
width: 65px;
height: 65px;
text-align: center;
line-height: 65px;
font-size: 18px;
// border-radius: 5px;
text-decoration: none;
}
.top:hover {
background: #fff;
}
.down:hover {
background: #fff;
}
}
.active {
background: #ffd050;
a {
color: #fff;
}
}
}
</style>
在使用页面
<div class="yema">
<v-pagination
:total="total"
:current-page="current"
@pagechange="pagechange"
></v-pagination>
<!-- <div id="demo7"></div> -->
</div>
/
//引入分页组件
import pagination from "@/components/commons/pagination/pagination.vue";
/
export default {
data() {
return {
total: 0, // 记录总条数
display: 10, // 每页显示条数
current: 1, // 当前的页数
currentPage: 1, //点击的页码
page: 1,
pageSize: 10,
totalCount: 0,
id: "", //点击的每一项的id
list: [
// { id: "1", pic: require("../../assets/images/首页-1.jpg") },
// { id: "2", pic: require("../../assets/images/首页-1.jpg") },
// { id: "3", pic: require("../../assets/images/首页-1.jpg") }
]
};
},
components: {
Footer,
//引入分页组件
"v-pagination": pagination
},
methods: {
pagechange: function(currentPage) {
console.log(2222222);
console.log(currentPage);
this.currentPage = currentPage;
// ajax请求, 向后台发送 currentPage, 来获取对应的数据
this.pagination();
},
}