示例
Events
| 事件名称 | 说明 | 回调参数 |
|---|
| current-change | current-change currentPage 改变时会触发 当前页 | 当前页 |
| prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页 |
| next-click | 用户点击下一页按钮改变当前页后触发 | 当前页 |
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| total | 总条数 | Number | - | 0 |
| currentPage | 当前页数 需添加.sync修饰符 | Number | - | 1 |
| pageSize | 每页显示条目个数 | Number | - | 10 |
| pageCount | 页码按钮的数量，当总页数超过该值时会折叠 | Number | 大于等于 5 且小于等于 21 的奇数 | 7 |
页面代码
js代码
export default {
name: 'pagination',
data() {
return {
leftIcon: '<',
rightIcon: '>',
page: 1,
size: 10,
inputValue: '',
ifFocus: false,
}
},
computed: {
// 总分页数
totalPage() {
console.log(Math.ceil(this.total / this.pageSize), this.pageCount);
return Math.ceil(this.total / this.pageSize);
},
nums() {
return Math.floor((this.pageCount - 3) / 2)
},
// 分页数据列表
pageList() {
const listTotal = this.totalPage;
let count = this.pageCount;
let list = [];
const num = this.nums
// console.log(num);
if (listTotal <= count) {
for (let i = 0; i < listTotal - 2; i++) {
list.push(i + 2);
}
} else {
if ((this.page - num - 1) <= 1) {
// 从2开始
for (let i = 0; i < count - num ; i++) {
list[i] = i + 2;
}
} else if ((this.page + num + 1) >= listTotal) {
// 从listTotal减小
for (let i = 0; i < count - num; i++) {
list[i] = listTotal - (count -num - i);
}
} else {
// 左边
for (let i = 0; i < num; i++) {
list[i] = this.page - (num - i);
// console.log(i + 1);
}
// 中间数
list[num] = this.page;
// console.log(num + 1);
// 右边数
for (let i = 0; i < num; i++) {
list[num + 1 + i] = this.page + i + 1;
// console.log(num + 2 + i);
}
}
}
console.log(list);
return list
},
pageCountFloor() {
return Math.floor(this.pageCount / 2)
}
},
watch: {
currentPage(newValue) {
if (newValue !== this.page) this.page = newValue;
},
page(newValue) {
if (newValue !== this.inputValue) this.inputValue = newValue;
},
},
created() {
if (this.currentPage !== this.page) this.page = this.currentPage;
if (this.page !== this.inputValue) this.inputValue = this.page;
},
methods: {
// 点击页数
handlePage(item) {
if (item === this.page) return
this.page = item;
this.$emit('update:currentPage', item);
this.$emit('current-change', item);
},
// 输入框改变
inputChange(e) {
const value = Number(e.target.value);
if (value !== 'NaN' && this.$utils.strType(value) === 'Number') {
if (value > 0 && value <= this.totalPage) {
this.handlePage(value)
} else this.inputValue = this.page;
} else this.inputValue = this.page;
},
// 上一页
prevClick() {
if (this.page === 1) return
this.handlePage(this.page - 1)
},
// 下一页
nextClick() {
if (this.page === this.totalPage) return
this.handlePage(this.page + 1)
},
nextEllipsisClick() {
if (this.page === 1) this.handlePage(this.page + this.nums + 2);
else this.handlePage(this.page + this.nums);
},
prevEllipsisClick() {
console.log(this.nums);
if (this.page === this.totalPage) this.handlePage(this.page - this.nums - 2);
else this.handlePage(this.page - this.nums);
},
}
}
样式代码
暑期编程PK赛
得CSDN机械键盘等精美礼品！
