1.父组件引入
src/views/goods/components/goods-comment.vue
<!-- page表示初始化分页时,默认显示第几页--><XtxPagination @change-page='changePage':pagesize='reqParams.pageSize':total='total':page='1'/>//调接口import{findCommentListByGoods}from'@/api/product.js'exportdefault{setup(){// 筛选条件准备const reqParams=reactive({// 当前页码
page:1,// 每页的条数
pageSize:10,// 是否有图片
hasPicture:null,// 筛选条件
tag:null,// 排序的字段
sortField:null})// 侦听参数的变化watch(reqParams,()=>{findCommentListByGoods(goods.value.id, reqParams).then(ret=>{
total.value= ret.result.counts
list.value= ret.result.items})},{
immediate:true})// 控制页码的变化constchangePage=(page)=>{// 修改分页参数,重新调用接口即可
reqParams.page= page}}}
2.子组件
src/components/library/xtx-pagination.vue
<template><divclass="xtx-pagination"><a @click='changePage(false)' href="javascript:;":class="{disabled: currentPage===1}">上一页</a><span v-if='currentPage > 3'>...</span><a @click='changePage(item)' href="javascript:;":class='{active: currentPage===item}' v-for='item in list':key='item'>{{item}}</a><span v-if='currentPage < pages - 2'>...</span><a @click='changePage(true)' href="javascript:;":class='{disabled: currentPage===pages}'>下一页</a></div></template><script>import{ computed, ref}from'vue'exportdefault{
name:'XtxPagination',
props:{
total:{
type: Number,default:80},
pagesize:{
type: Number,default:10}// 默认初始页码// page: {// type: Number,// default: 1// }},setup(props,{ emit, attrs}){// attrs表示父组件传递的属性,但是props没有接收的属性,这种属性不是响应式的// 动态计算中期的页码信息// 每页的条数// const pagesize = 8// 总页数let pages= Math.ceil(props.total/ props.pagesize)// 当前页码// console.log(attrs.page)const currentPage=ref(attrs.page||1)// 动态计算页码列表const list=computed(()=>{// 当父组件传递total的值发生变化时,计算属性会重新计算
pages= Math.ceil(props.total/ props.pagesize)const result=[]// 总页码小于等于5;大于5if(pages<=5){// 总页码小于等于5的情况for(let i=1; i<= pages; i++){
result.push(i)}}else{// 总页码大于5if(currentPage.value<=2){// 左侧临界值for(let i=1; i<=5; i++){
result.push(i)}}elseif(currentPage.value>= pages-1){// 右侧临界值for(let i= pages-4; i<= pages; i++){
result.push(i)}}else{// 中间的状态for(let i= currentPage.value-2; i<= currentPage.value+2; i++){
result.push(i)}}}return result})// 控制上一页和下一页变化constchangePage=(type)=>{if(type===false){// 上一页// 页面是第一页时,禁止点击操作if(currentPage.value===1)returnif(currentPage.value>1){
currentPage.value-=1}}elseif(type===true){// 下一页// 页面是最后页时,禁止点击操作if(currentPage.value=== pages)returnif(currentPage.value< pages){
currentPage.value+=1}}else{// 点击页码
currentPage.value= type}emit('change-page', currentPage.value)}return{ list, currentPage, pages, changePage}}}</script><style scoped lang="less">.xtx-pagination{
display: flex;
justify-content: center;
padding:30px;> a{
display: inline-block;
padding:5px10px;
border:1px solid #e4e4e4;
border-radius:4px;
margin-right:10px;&:hover{
color: @xtxColor;}&.active{
background: @xtxColor;
color: #fff;
border-color: @xtxColor;}&.disabled{
cursor: not-allowed;
opacity:0.4;&:hover{
color: #333;}}}> span{
margin-right:10px;}}</style>
知识点:attrs表示父组件传递的属性,但是props没有接收的属性,这种属性不是响应式的(vue3新增)