vue3.0手动封装分页组件的方法
本文实例为大家分享了vue3.0手动封装分页组件的具体代码,供大家参考,具体内容如下
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' export default{ 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 }) // 控制页码的变化 const changePage = (page) => { // 修改分页参数,重新调用接口即可 reqParams.page = page } } }
2.子组件
src/components/library/xtx-pagination.vue
<template> <div class="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' export default { 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;大于5 if (pages <= 5) { // 总页码小于等于5的情况 for (let i = 1; i <= pages; i++) { result.push(i) } } else { // 总页码大于5 if (currentPage.value <= 2) { // 左侧临界值 for (let i = 1; i <= 5; i++) { result.push(i) } } else if (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 }) // 控制上一页和下一页变化 const changePage = (type) => { if (type === false) { // 上一页 // 页面是第一页时,禁止点击操作 if (currentPage.value === 1) return if (currentPage.value > 1) { currentPage.value -= 1 } } else if (type === true) { // 下一页 // 页面是最后页时,禁止点击操作 if (currentPage.value === pages) return if (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: 5px 10px; 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新增)
3.实现效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)