el-pagination组件封装

组件使用

在这里插入图片描述
源代码:

<script setup>
import Pagination from '@/components/pagination/index.vue'
import {ref} from "vue";const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(120)function loadData() {// 加载数据
}
</script><template><Pagination v-model:page-num="pageNum"v-model:page-size="pageSize":total="total"@loadData="loadData"/>
</template><style lang="scss" scoped>
</style>

组件属性

名称类型默认值是否必需说明
pageNumNumber1v-model:pageNum双向绑定属性,
pageSizeNumber10v-model:pageSize双向绑定属性
pagerCountNumber5需要显示的页码号数量
pageSizesArray[5,10,15,20]每页的大小
layoutString‘’prev, pager, next, jumper,total,sizes布局
totalNumber0总条数

组件事件

名称参数列表说明
loadData加载分页数据

第三方

// npm install @vueuse/core@11.1.0
import {useDebounceFn} from "@vueuse/core";

外部常量

export const Constants = {// xs 屏幕宽度(单位:px)XS_WIDTH: 768,
}

外部函数

// 获取浏览器窗口宽度
export function getClientWidth(){return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
}

组件源码:

<script setup>
import {computed, onMounted, ref, watch} from "vue";
import {getClientWidth} from "@/util/system.js";
import {Constants} from "@/setting.js";
import {useDebounceFn} from "@vueuse/core";const emit = defineEmits(['loadData', 'update:pageNum', 'update:pageSize'])
const prop = defineProps({pageNum: {type: Number,default: 1},pageSize: {type: Number,default: 10},pagerCount: {type: Number,default: 5},pageSizes: {type: Array,default: [5, 10, 15, 20]},layout: {type: String,default: ''},total: {type: Number,default: 0}
})// 窗口宽度
const clientWidth = ref(getClientWidth())// 窗口大小改变回调
function handleClientWidth() {clientWidth.value = getClientWidth()
}const pageNum1 = ref(prop.pageNum)
const pageSize1 = ref(prop.pageSize)
const pagerCount1 = computed(() => prop.pagerCount)
const pageSizes1 = computed(() => prop.pageSizes)
const layout1 = computed(() => {if (!prop.layout) {// 可视宽度是否小于768pxreturn clientWidth.value < Constants.XS_WIDTH ? 'prev, pager, next, total' : 'prev, pager, next, jumper,total,sizes'} else {return prop.layout}
})
const total1 = computed(() => prop.total)// 监听pageNum和pageSize的变化
watch([pageNum1, pageSize1], ([newPageNum, newPageSize]) => {emit('update:pageNum', newPageNum)emit('update:pageSize', newPageSize)// 节流函数,加载新数据loadData()
})// 防抖函数,处理页大小改变导致页号改变,连续发送两次请求的情况
const loadData = useDebounceFn(() => {emit('loadData')
}, 800)onMounted(() => {window.addEventListener("resize", handleClientWidth)
})
</script>
<template><el-paginationv-model:current-page="pageNum1"v-model:page-size="pageSize1":page-sizes="pageSizes1":layout="layout1":pager-count="pagerCount1":total="total1"hide-on-single-page/>
</template><style lang="scss" scoped></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/55659.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

H.264编解码工具 - NVIDIA CUDA

一、简介 NVIDIA CUDA编解码是一项采用NVIDIA图形处理器(GPU)来加速视频编码和解码的技术。CUDA(Compute Unified Device Architecture)是一种并行计算平台和编程模型,允许开发者使用GPU来进行通用计算。 优点: 加速编解码速度:CUDA编解码利用GPU的并行处理能力,可以…

RabbitMQ 工作方式详解

RabbitMQ 是一个开源的消息代理软件&#xff0c;它实现了高级消息队列协议&#xff08;AMQP&#xff09;。RabbitMQ 允许应用程序或系统以异步的方式交换数据&#xff0c;从而提高了系统的可扩展性和容错性。本文将详细介绍 RabbitMQ 的工作方式&#xff0c;包括其核心概念、消…

【Unity】unity安卓打包参数(个人复习向/有不足之处欢迎指出/侵删)

1.Texture Compression 纹理压缩 设置发布后的纹理压缩格式 Use Player Settings:使用在播放器设置中设置的纹理压缩格式 ETC&#xff1a;使用ETC格式&#xff08;兼容&#xff09; ETC2&#xff1a;使用ETC2格式&#xff08;很多设备不支持&#xff09; ASTC&#xff1a;使用…

腾讯云服务器上使用Nginx部署的静态网站打开速度慢的原因分析及优化解决方案

目录 前言1. 网站打开速度慢的原因分析1.1 服务器配置不足1.2 网络延迟1.3 Nginx配置不合理1.4 静态资源未优化 2. 网站速度的测试与分析2.1 使用浏览器开发者工具分析2.2 在线工具测试 3. 网站优化的具体方法3.1 服务器配置优化3.2 CDN加速与DNS优化3.3 优化Nginx配置3.3.1 启…

Django一分钟:DRF ViewSet烹饪指南,创建好用的视图集

本文将介绍django视图集的内部实现&#xff0c;并带你重写部分代码自己组装强大且趁手的视图集&#xff0c;以满足自定义的业务需求&#xff0c;避免编写大量重复代码。 一、基础知识 Django Rest framework框架允许你将一组相关视图的逻辑组合到一个类中&#xff0c;也就是我…

PCIe6.0 AIC金手指和板端CEM连接器信号完整性设计规范

先附上我之前写的关于PCIe5.0金手指的设计解读&#xff1a; PCIe5.0的Add-in-Card(AIC)金手指layout建议&#xff08;一&#xff09;_pcie cem-CSDN博客 PCIe5.0的Add-in-Card(AIC)金手指layout建议&#xff08;二&#xff09;_gnd bar-CSDN博客 首先&#xff0c;相较于PCI…

《深度学习》【项目】OpenCV 发票识别 透视变换、轮廓检测解析及案例解析

目录 一、透视变换 1、什么是透视变换 2、操作步骤 1&#xff09;选择透视变换的源图像和目标图像 2&#xff09;确定透视变换所需的关键点 3&#xff09;计算透视变换的变换矩阵 4&#xff09;对源图像进行透视变换 5&#xff09;对变换后的图像进行插值处理 二、轮廓检测…

Python | Leetcode Python题解之第454题四数相加II

题目&#xff1a; 题解&#xff1a; class Solution:def fourSumCount(self, A: List[int], B: List[int], C: List[int], D: List[int]) -> int:countAB collections.Counter(u v for u in A for v in B)ans 0for u in C:for v in D:if -u - v in countAB:ans countAB…

P2480 [SDOI2010] 古代猪文

原题链接 简化题意&#xff1a; 给定 n , G n,G n,G&#xff0c;求 G ∑ d ∣ n C n d m o d 999911659 G^{\sum_{d|n}C_{n}^{d}}mod_{}999911659 G∑d∣n​Cnd​mod​999911659。 发现指数可能非常大&#xff0c;而模数为质数&#xff0c;此时可以考虑运用扩展欧拉定理来化…

网约班车升级手机端退票

背景 作为老古董程序员&#xff0c;不&#xff0c;应该叫互联网人员&#xff0c;因为我现在做的所有的事情&#xff0c;都是处于爱好&#xff0c;更多的时间是在和各行各业的朋友聊市场&#xff0c;聊需求&#xff0c;聊怎么通过IT互联网 改变实体行业的现状&#xff0c;准确的…

k8s实战-2

k8s实战-2 一、Deployment1.多副本2.扩缩容3.自愈&故障转移4.滚动更新5.版本回退 二、Service1.ClusterIP2.NodePort 总结 一、Deployment Deployment 是 k8s 中的一个资源对象&#xff0c;用于管理应用的副本&#xff08;Pods&#xff09;。它的主要作用是确保集群中运行…

二分查找一>山脉数组的峰顶索引

1.题目&#xff1a; 2.解析&#xff1a; 代码&#xff1a; public int peakIndexInMountainArray(int[] arr) {int left 1, right arr.length-2;while(left < right) {int mid left (right-left1) / 2;if(arr[mid] > arr[mid-1]) left mid;else right mid-1;}ret…

CSP-J/S 复赛算法 背包DP

文章目录 前言背包DP的简介问题描述目标解决方法1. **定义状态**2. **状态转移方程**3. **初始化**4. **目标**举个例子动态规划解决背包问题的核心 DP背包问题示例代码问题描述代码实现核心代码讲解&#xff1a;举例&#xff1a;总结&#xff1a; 总结 前言 背包问题是算法竞…

软件测试:postman详解

一、Postman背景介绍 用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的&#xff0c;用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具。今天给大家介绍的这款网页调试工具不仅可以调试简单的css、html、脚本等简单的网…

自然语言处理(NLP):用Python进行情感分析的深入探索

解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 前言 随着互联网的发展,社交媒体、产品评价和新闻评论等各种文本数据的涌现,情感分析作为自然语言处理(NLP)领域的一项重要技术,逐渐成为研究和商业应用中的热点之一。情感分析的目标是通过分析文本中的情感…

ubuntu增加swap

ubuntu增加swap 创建myswapfile上电启动 创建myswapfile 首先在你的目录中创建一个myswapfile并创建myswapfile文件&#xff0c;这个名字可以改成你自己的 mkdir myswapfile cd myswapfile/ # 单个为1G&#xff0c;数量为7&#xff0c;总共7g内存 dd if/dev/zero ofswapfile …

更新C语言题目

1.以下程序输出结果是() int main() {int a 1, b 2, c 2, t;while (a < b < c) {t a;a b;b t;c--;}printf("%d %d %d", a, b, c); } 解析:a1 b2 c2 a<b 成立 ,等于一个真值1 1<2 执行循环体 t被赋值为1 a被赋值2 b赋值1 c-- c变成1 a<b 不成立…

【AI大模型-文心-思维树解读-仓颉精通之路-10】

提问&#xff1a;如果是学习一门计算机语言&#xff0c;基于哪种prompt的框架&#xff0c;会得到更好的帮助 回答&#xff1a;如下 版本&#xff1a;文心大模型3.5 在学习一门计算机语言时&#xff0c;为了获得更好的帮助&#xff0c;可以基于以下几种prompt的框架来构建你的学…

如何搭建自己的域名邮箱服务器?Poste.io邮箱服务器搭建教程,Linux+Docker搭建邮件服务器的教程

Linux系统Docker搭建Poste.io电子邮件服务器&#xff0c;搭建属于自己的域名邮箱服务器&#xff0c;可以无限收发电子邮件&#xff08;Email&#xff09;&#xff01; 视频教程&#xff1a;https://www.bilibili.com/video/BV11p1mYaEpM/ 前言 什么是域名邮箱&#xff1f; …

各省份-产业链现代化水平(2001-2022年)

产业链现代化水平是一个综合性指标&#xff0c;它为我们提供了一个多维度的视角来评估各省份在产业链现代化进程中的发展水平。这个指标涵盖了技术创新、产业升级、生产效率、产业结构优化等多个方面&#xff0c;包含原始数据、测算结果以及参考文献。 2001年-2022年各省份-产…