vue 之分页器 2
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ea3f2bbc1fbdda6c47b0085a7a2ce078.png#pic_center)
pagination/Pagination.vue
<!-- 一个简单的分页器组件 -->
<template>
<div class="page_wrap clear_fix">
<div class="select_wrap">
每页
<span>{{ comShowPage }}</span>条 共
<span>{{ comTotal }}</span>条
</div>
<div class="firstPage" @click="firstPage" :class="{ prePageGray: comCurrentPage == 1 }">首页</div>
<div class="prePage" @click="prePage" :class="{ prePageGray: comCurrentPage == 1 }">上一页</div>
<div class="pageCell clear_fix">
<div
v-for="(item, index) in comEndPage"
:key="index"
:class="{ active: comCurrentPage === index + 1 }"
@click="changePage(index)"
>{{ item }}</div>
</div>
<div
class="nextPage"
@click="nextPage"
:class="{ prePageGray: comCurrentPage >= comEndPage }"
>下一页</div>
<div
class="lastPage"
@click="lastPage"
:class="{ prePageGray: comCurrentPage == comEndPage }"
>尾页</div>
<div class="goto">
<input type="text" v-model="inpValue" @keyup.enter="goTo" />
<span @click="goTo">跳转</span>
</div>
</div>
</template>
<script>
export default {
name: "Pagination",
components: {},
props: {
showPage: {
type: Number,
default() {
return 10;
}
},
total: {
type: Number,
default() {
return 10;
}
},
currentPage: {
type: Number,
default() {
return 1;
}
},
size: {
type: Number,
default() {
return 10;
}
}
},
data() {
return {
comShowPage: this.showPage,
comCurrentPage: this.currentPage,
comTotal: this.total,
inpValue: ""
};
},
computed: {
comEndPage() {
return parseInt(this.comTotal / this.comShowPage);
}
},
methods: {
firstPage() {
this.comCurrentPage = 1;
this.$emit("changePage", this.comCurrentPage);
},
prePage() {
this.comCurrentPage = this.comCurrentPage - 1;
if (this.comCurrentPage <= 0) {
this.comCurrentPage = 1;
}
this.$emit("changePage", this.comCurrentPage);
},
nextPage() {
this.comCurrentPage = this.comCurrentPage * 1 + 1;
if (this.comCurrentPage >= this.comEndPage) {
this.comCurrentPage = this.comEndPage;
}
this.$emit("changePage", this.comCurrentPage);
},
changePage(index) {
console.log("index", index);
this.comCurrentPage = index + 1;
this.$emit("changePage", this.comCurrentPage);
},
lastPage() {
this.comCurrentPage = this.comEndPage;
this.$emit("changePage", this.comCurrentPage);
},
goTo() {
this.changePage(this.inpValue - 1);
this.inpValue = "";
}
}
};
</script>
<style lang="scss" scoped>
.clear_fix:after {
content: ".";
clear: both;
height: 0;
overflow: hidden;
display: block;
visibility: hidden;
}
.clear_fix {
zoom: 1;
}
.page_wrap {
height: 32px;
line-height: 32px;
cursor: pointer;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
.prePageGray {
color: #ccc;
cursor: not-allowed;
}
& > div {
float: left;
padding: 0 5px;
margin: 0 5px;
border: 1px solid #000;
}
& > div:nth-child(1) {
border: none;
}
.pageCell {
border: none;
padding: 0;
background: #fff;
& > div {
float: left;
margin-right: 5px;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
border: 1px solid #ccc;
}
.active {
background: pink;
color: #fff;
}
}
.goto {
input {
padding-left: 10px;
height: 28px;
line-height: 28px;
width: 32px;
border: none;
outline: none;
border-bottom: 1px solid #000;
color: red;
}
span {
padding-left: 5px;
}
}
}
</style>
pagination/index.js
import Pagination from "./Pagination.vue";
Pagination.install = function (vue) {
vue.component(Pagination.name, Pagination);
};
export default Pagination;
main.js
import Pagination from "@/components/commom/pagination/index";
Vue.use(Pagination);
使用分页组件
<template>
<div>
<Pagination
:showPage="pages.showPage"
:total="pages.total"
:size="pages.size"
:currentPage="pages.currentPage"
@changePage="changePage"
></Pagination>
</div>
</template>
<script>
export default {
name: "Dres",
data() {
return {
pages: {
total: 100,
showPage: 10,
unit: 1,
page: 1,
size: 10
},
list: [],
};
},
methods: {
changePage(val) {
console.log("当前页", val);
this.pages.page = val;
}
}
};
</script>
<style lang="scss" scoped></style>