vue前端分页插件,vueelementui分页功能
这篇文章主要为大家详细介绍了某视频剪辑软件分页器组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件分页器组件的使用，供大家参考，具体内容如下
效果图如下：
鼠标悬浮时切换为箭头：
创建自定义分页组件Pager.vue:预设主题色为@主题颜色：# d 93844每页展示10条数据，一次最多显示5个页码，支持输入页码跳转：
模板
div class= m-寻呼机-wrap v-if=totalCount
u文本共{{ totalPage }}页/{{ totalCount }}条/span
span class= u-item txt :class= { disabled :当前页面===1 } @ click=更改页面(1)首页/span
span class= u-item txt :class= { disabled :当前页面===1 } @ click=更改页面(当前页面-1)上一页/span
跨度
u形省略号
ref=forward
v-show=forwardMore
@click=onForward
@mouseenter=onEnterForward
@ mouse leave= onLeaveForward middot；middotmiddot/span
span :class=[u-item ，{ active :当前页面===num }] v-for= num in page list :key= num @ click= change page(num) { { num } }/span
跨度
u形省略号
ref=向后
v-show=backwardMore
@click=onBackward
@mouseenter=onEnterBackward
@ mouse leave= onLeaveBackward middot；middotmiddot/span
span class= u-item txt :class= { disabled :当前页面===总页面} @ click=更改页面(当前页面1)下一页/span
span class= u-item txt :class= { disabled :当前页面===总页面} @ click=更改页面(总页面)尾页/span
跳转页面跳至输入类型=text v-model=jumpNumber/页/span
span class= u-item txt @ click=跳转页面(跳转号)确定/span
/div
/模板
脚本
导出默认值{
名称：寻呼机，
data () {
返回{
currentPage: this.pageNumber，//当前页码
currentSize: this.pageSize，//分页数
跳线编号： ,//跳转的页码
forwardMore: false，//左箭头展示
backwardMore: false //右箭头展示
}
},
道具：{
页码：{ //当前页面
类型：数量，
默认值：1
},
页面大小：{ //每页显示数量[10条/页20条/页30条/页40条/页]
类型：数量，
默认值：10
},
总数：{ //总条数
类型：数量，
默认值：0
},
pageListNum: { //显示的页码数组长度
类型：数量，
默认值：5
}
},
计算值：{
totalPage () { //总页数
回归数学。ceil(这个。总数/这个。currentsize)//向上取整
},
pageList () { //获取显示的页码数组
返回这个。交易页面列表(这。当前页面)
}
},
观察：{
当前页面（收件人，发件人){
//通过更改当前页码，修改分页数据
这个emit(changePage ，{ currentPage: to，currentSize: this.currentSize })
}
},
已创建(){
//监听键盘进入按键
document.onkeydown=(e)={
const ev=e window.event
如果(曾经。键码===13这个。跳转号){
this.jumpPage(this.jumpNumber)
}
}
},
方法：{
dealPageList (curPage) {
var resList=[]
var offset=数学。地板(这个。pagelistnum/2)//向下取整
定义变量寻呼机={
start: curPage - offset，
结束：卷曲页偏移
}
if (pager.start 1) {
寻呼机。end=寻呼机。结束(1页。开始)
pager.start=1
}
if (pager.end this.totalPage) {
寻呼机。开始=寻呼机。开始-(寻呼机。结束这一切。总页数)
pager.end=this.totalPage
}
if (pager.start 1) {
pager.start=1
}
if (pager.start 1) {
this.forwardMore=true
}否则{
this.forwardMore=false
}
if (pager.end this.totalPage) {
this.backwardMore=true
}否则{
this.backwardMore=false
}
//生成要显示的页码数组
for(让我=传呼机。开始；i=pager.endi ) {
resList.push(i)
}
返回结果列表
},
onEnterForward () {
这个参考文献。向前。innerhtml= laquo
},
onLeaveForward () {
这个参考文献。向前。innerhtml= middot“middotmiddot”
},
onEnterBackward () {
这个参考文献。落后。innerhtml= raquo
},
onLeaveBackward () {
这个参考文献。落后。innerhtml= middot“middotmiddot”
},
onForward () {
这个。当前页面=这一页。当前页面-这一页。pagelistnum 0？这个。当前页面-这一页。页面列表数：1
},
onBackward () {
这个。当前页面=这一页。当前页面。pagelistnum this。总页数？这个。当前页面。pagelistnum:这个。总页数
},
跳转页面(jumpNum) {
if (Number(jumpNum)) {
if (Number(jumpNum) 1) {
jumpNum=1
}
如果(Number(jump num)这个。总页数){
jumpNum=this.totalPage
}
this.changePage(编号(jumpNum))
}
this.jumpNumber= //清空跳转输入框
},
changePage (pageNum) {
if (this.currentPage！==pageNum) { //点击的页码不是当前页码
this.currentPage=pageNum
}
}
}
}
/脚本
style lang=less 范围
@主题颜色：# d 93844//自定义主题色。m传呼机-包装{
高度：32px
行高：30px
字体大小：14px
颜色：# 888;
文本对齐：居中；u-text {
右边距：5px
}。u-item {
右边距：5px
最小宽度：30px
显示：内嵌-块；
用户选择：无；//禁止选取文本
边框：1px纯色# d9d9d9
边框-半径：4px
光标：指针；
：悬停{。active()；
}
}。活动{
颜色：# fff
背景：@ themeColor
边框：1px solid @ themeColor
}。已禁用{
颜色：rgba(0，0，0，25);
：悬停{
光标：不允许；
颜色：rgba(0，0，0，25);
背景：# fff
边框：1px纯色# d9d9d9
}
}。txt {
填充：0 6px
}。u形省略号{
显示：内嵌-块；
宽度：12px
填充：0 8px
右边距：5px
光标：指针；
：悬停{
颜色：@ themeColor
}
}。你-跳转页面{
边距：0 8px 0 3px
输入{
宽度：32px
高度：20px
填充：5px 8px
保证金：0 5px
边框：1px纯色# d9d9d9
边框-半径：4px
文本对齐：居中；
}
}
}
/风格
在要使用的页面引入分页器：
div class=m页
寻呼机
@changePage=jumpPage
:totalCount=totalCount
:pageNumber=queryParams.p
:pageSize=查询参数。pageSize /
/div
从"@/组件/寻呼机"导入寻呼机
组件：{
寻呼机
}
总数：0,
查询参数：{
页面大小：10,
p: 1，
mod:"搜索"
},
跳转页面(e) {
这个。查询参数。p=e .当前页面
这个。查询参数。页面大小=e . currentsize
this.getDataLists() //调用接口获取列表数据
}。m页{
边距：30px自动60px
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。