一、翻页组件
<template>
<!-- 只有总页数大于1才显示分页 -->
<div class="pager-container" v-if="pageNumber > 1">
<a @click="handleClick(1)" :class="{ disabled: current === 1 }">|<<</a>
<a @click="handleClick(current-1)" :class="{ disabled: current === 1 }"><<</a>
<a
v-for="(n, i) in numbers"
:key="i"
:class="{ active: current === n }"
>{{ n }}</a
>
<a @click="handleClick(current + 1)" :class="{ disabled: current === pageNumber }">>></a>
<a @click="handleClick(pageNumber)" :class="{ disabled: current === pageNumber }">>>|</a>
</div>
</template>
<script>
export default {
name: "Pager",
props: {
current: {
type: Number,
default: 1,
},
total: {
type: Number,
default: 0,
},
limit: {
type: Number,
default: 10,
},
visibleNumber: {
type: Number,
default: 10,
},
},
data() {
return {};
},
computed: {
pageNumber() {
return Math.ceil(this.total / this.limit);
},
visibleMin() {
let min = this.current - Math.floor(this.visibleNumber / 2);
if (min < 1) {
min = 1;
}
return min;
},
visibleMax() {
let max = this.visibleMin + this.visibleNumber - 1;
if (max > this.pageNumber) {
max = this.pageNumber;
}
return max;
},
numbers() {
let nums = [];
for (let i = this.visibleMin; i <= this.visibleMax; i++) {
nums.push(i);
}
return nums;
},
},
methods: {
handleClick(newPage) {
if (newPage < 1) {
newPage = 1;
}
if (newPage > this.pageNumber) {
newPage = this.pageNumber;
}
if (newPage === this.current) {
return;
}
this.$emit("pageChange", newPage);
},
},
};
</script>
<style lang="less" scoped>
@import "~@/styles/var.less";
.pager-container {
display: flex;
justify-content: center;
margin: 20px 0;
a {
color: @primary;
margin: 0 8px;
cursor: pointer;
&.disabled {
color: @lightWords;
cursor: not-allowed;
}
&.active {
color: @words;
font-weight: blod;
cursor: pointer;
}
}
}
</style>
<template>
<div id="app">
<Pager :total="total" :current="current" @pageChange="handlePageChange($event)"/>
</div>
</template>
<script>
import Pager from "./components/Pager";
export default {
name: "App",
components: {
Pager,
},
data() {
return {
current: 10,
total: 302,
};
},
methods: {
handlePageChange(newPage) {
this.current = newPage;
console.log("加载当前页数据");
},
},
};
</script>
<style>
</style>
二、组件事件总结
- 当子组件执行
this.$emit("pageChange", newPage);
时,父组件出发自定义事件pageChange,page Change事件触发之后执行事件处理函数handlePageChange($event)
,并用$event
接受子组件传递过来的参数。