vue前端分页插件,vue分页插件
这篇文章主要给大家介绍了关于某视频剪辑软件封装自定义分页器组件与使用方法的相关资料，非常的好用，对大家的学习或者工作具有一定的参考学习价值，需要的朋友可以参考下
前言
分页是开发各种系统时候最常用的功能，下面为本人封装的一个分页组件。
实现分页器操作需要以下参数
当前页：页码每页展示条数：页面大小数据总条数：总计连续页码数：继续（一般为奇数，页面对称更美观)分页器在各大项目中出现的频率较多，我们可以封装成静态组件，并全局注册这个组件。
1.全局注册组件方法：在mian.js文件中操作
从" @/组件/分页"//导入分页组件路径
组件(分页。名称，分页)
2.其他页面分页器的时候可以直接使用。父页面向子页面传递数据，使用支柱传递。
模板
页码
:pageNo=this.pageNo
:pageSize=this.pageSize
：总计=93
:continues=5
@getPageNo=getPageNo
/
/模板
脚本
导出默认值{
名称："索引",
data(){
返回{
页码：1,
页面大小：4,
}
},
方法：{
getPageNo(pageNo){
this.pageNo=pageNo
}
}
}
/脚本
分页器Pagination.vue
模板
div class=分页
！-上-
button:disabled= pageNo==1 @ click= get pageNo(pageNo-1)
上一页
/按钮
按钮
v-if= startnummandennum。开始1
@click=getPageNo(1)
:class={ active: pageNo==1 }
一
/按钮
按钮
v-if= startnummandennum。开始2
@ click= get pageNo(pageNo-continues)
/按钮
！-中间部分-
按钮
生成中间页面中的v-for=(第页，索引)
:key=index
@click=getPageNo(page)
:class={ active: pageNo==page }
{{ page }}
/按钮
！-下-
按钮
v-if= startnummandennum。总页数结束-1
@click=getPageNo(pageNo继续)
/按钮
按钮
v-if= startnummandennum。总页数结束
@click=getPageNo(totalPage)
:class= { active:pageNo==总页数}
{{ totalPage }}
/按钮
按钮
:disabled=pageNo==totalPage
@click=getPageNo(pageNo 1)
下一页
/按钮
按钮style=margin-left: 30px 共{{总计}}条/按钮
/div
/模板
脚本
导出默认值{
名称：分页，
props: [pageNo ， pageSize ， total ， continues]，
计算值：{
//计算出总页数
totalPage() {
//向上取整
返回数学。ceil(这个。总计/本。pagesize)；
},
//计算出页码的起始和结束数字
startnummandennum(){
const {continues，pageNo，totalPage }=this
//先定义两个变量存储起始数字与结束数字
让start=0，
end=0；
如果(续总页数){
start=1；
end=totalPage
}否则{
//起始数字
start=pageNo-parse int(continues/2)；
//结束数字
end=pageNo parse int(continues/2)；
如果（开始1) {
start=1；
结束=继续；
}
if (end totalPage) {
end=totalPage
start=总页数-continues 1；
}
}
返回{开始，结束}；
},
//过滤掉小于起始页的页码
generatemidlepage(){
设arr=[]；
//避免页面中同时使用迭代和控制显示
对于(设I=0；我=这个。startnumandendnum。结束；i ) {
数组推送(一)
}
let temp=arr.filter(item={
退货项目=this。startnummandennum。开始
})
返回温度
}
},
方法：{
getPageNo(val) {
//自定义事件子页面向父页面传参，计算属性值
这个emit(getPageNo ，val)
},
}
};
/脚本
style lang=less 范围。分页{
文本对齐：居中；
按钮{
保证金：0 5px
背景色：# f4f4f5
颜色：# 606266;
大纲：无；
边框-半径：2px
填充：0 4px
垂直对齐：顶部；
显示：内嵌-块；
字体大小：13px
最小宽度：35.5像素；
高度：28px
行高：28px
光标：指针；
框大小：边框-框；
文本对齐：居中；
边框：0;
[已禁用] {
颜色：# c 0 C4 cc；
光标：不允许；
}。活动{
光标：不允许；
背景色：# 409eff
颜色：# fff
}
}
}。活动{
背景：天蓝色；
}
/风格
总结
到此这篇关于某视频剪辑软件封装自定义分页器组件与使用方法的文章就介绍到这了，更多相关某视频剪辑软件封装自定义分页器组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。