多平台统一管理软件接口,如何实现多平台统一管理软件接口
240
2023-06-04
基于vue实现分页/翻页组件paginator示例
序言
项目需要自己写了一个基于vue的paginator分享出来,欢迎各路好汉来指教
当页数小于999(包括999)页
页数大于999页
首页或尾页disabled
10页之内显示
Usage
参数
pageCount: 整数,代表总页数
监听事件
@togglePahttp://ge: 监听切换页面事件,可以获取到当前前往页的页数
父组件调用方法 index.vue
export default {
data(){
return{
//总页数
pageCount: 24
}
},
methods:{
togglePage(indexPage){
//打印出当前页数
console.log(indexPage);
},
}
}
分页组件 paginator.vue
export default {
props:['pageCount'],
data(){
return {
curPage: 1,
};
},
computed:{
middlePages(){
if(this.pageCount <= 2){
return 0;
}else if(this.pageCount> 2 && this.pageCount <= 10){
return this.pageCount-2;
}else{
return this.curPage > 999 ? 5 : 8;
}
},
bigLimmsLFjJImQEit(){
return this.middlePages > 5 ? this.pageCount-6 : this.pageCount -3;
},
offset(){
if(this.curPage <= 5){
return 2;
}else if(this.curPage >= this.bigLimit){
return this.bigLimit-2;
}else{
return this.middlePages > 5 ? this.curPage-3 : this.curPage-2;
}
}
},
methods:{
page(indexPage){
this.$emit('togglePage',indexPage);
this.curPage = indexPage;
},
prevPage(){
if(this.curPage != 1){
this.page(this.curPage-1);
}
},
nextPage(){
if(this.curPage != this.pageCount){
this.page(this.curPage+1);
}
}
}
};
@import 'styles/vars.css';
.pagination{
width: 660px;
text-align: center;
ul{
margin: 40px 0 60px 0;
li{
cursor: pointer;
display: inline-block;
padding: 5px 9px;
border: 1px solid #e1e1eb;
margin-right: 5px;
&.active{
background: #4078c0;
color: #fff;
}
&.ellipsis{
border: none;
}
&.disabled{
color: #dcdcdc;
}
}
}
}
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~