西安营销型网站制作,兰州市规划建设局网站,泰安中文网站建设电话,简洁大气的企业网站预览 ———————————————————————————————————————————
组件文档
Pager组件 属性
属性名含义类型必填默认值current当前页码#xff08;总数据量/单页容量#xff09;Number否1total总数据量Number否0limit单页容量Number否10vis…预览 ———————————————————————————————————————————
组件文档
Pager组件 属性
属性名含义类型必填默认值current当前页码总数据量/单页容量Number否1total总数据量Number否0limit单页容量Number否10visibleNumber可见页码数Number否10
事件
事件名含义事件参数参数类型pageChange($event)页码变化event为当前页码新的页码Number
功能 首页跳转单页跳转末页跳转 每次必显示可见页码数 组件第一层未设置样式pager-container
———————————————————————————————————————————
注释代码
templatediv classpager-container v-ifpageNumber 1 //只有页面大于1才显示页码a clickhandleClick(1) :class{ disabled: current 1}|lt;lt;/a a clickhandleClick(current - 1) :class{ disabled: current 1}lt;lt;/aa clickhandleClick(item) v-for(item,i) in numbers :keyi :class{ active: item current }{{ item }}/aa clickhandleClick(current 1) :class{ disabled: current pageNumber }gt;gt;/aa clickhandleClick(pageNumber) :class{ disabled: current pageNumber }gt;gt;|/a/div
/templatescript
export default {props:{ //可传参数current:{type:Number,default: 1,},total:{type:Number,default: 0,},limit:{type:Number,default: 10,},visibleNumber:{type:Number,default: 10,},},computed:{pageNumber(){return Math.ceil(this.total / this.limit);},visibleMin(){let min this.current - Math.floor(this.visibleNumber / 2);if(min1){min 1;}return min;},visibleMax(){let max this.visibleMin this.visibleNumber - 1;if(max this.pageNumber){max this.pageNumber;}return max;},numbers(){let nums [];let numsLength this.visibleMin;if((this.visibleMax - this.visibleMin) this.visibleNumber - 1){numsLength this.visibleMax - this.visibleNumber 1;}for(let i numsLength; i this.visibleMax;i){nums.push(i);}return nums;}},methods:{handleClick(newPage){ //页码处理if(newPage 1){newPage 1;}else if( newPage this.pageNumber){newPage this.pageNumber}this.$emit(pageChange,newPage) //组件向外传递}}
}
/scriptstyle langless scoped //样式
import ~/styles/var.less; //引入主题.pager-container{display: flex;justify-content: center;margin: 20px 0;cursor: pointer;a{color: danger;margin:0 6px;.disabled {color: blue;cursor: not-allowed;}.active{color: green;font-weight: bold;cursor: text;}}}
/style
———————————————————————————————————————————
可编译代码
templatediv classpager-container v-ifpageNumber 1a clickhandleClick(1) :class{ disabled: current 1}|lt;lt;/aa clickhandleClick(current - 1) :class{ disabled: current 1}lt;lt;/aa clickhandleClick(item) v-for(item,i) in numbers :keyi :class{ active: item current }{{ item }}/aa clickhandleClick(current 1) :class{ disabled: current pageNumber }gt;gt;/aa clickhandleClick(pageNumber) :class{ disabled: current pageNumber }gt;gt;|/a/div
/templatescript
export default {props:{current:{type:Number,default: 1,},total:{type:Number,default: 0,},limit:{type:Number,default: 10,},visibleNumber:{type:Number,default: 10,},},computed:{pageNumber(){return Math.ceil(this.total / this.limit);},visibleMin(){let min this.current - Math.floor(this.visibleNumber / 2);if(min1){min 1;}return min;},visibleMax(){let max this.visibleMin this.visibleNumber - 1;if(max this.pageNumber){max this.pageNumber;}return max;},numbers(){let nums [];let numsLength this.visibleMin;if((this.visibleMax - this.visibleMin) this.visibleNumber - 1){numsLength this.visibleMax - this.visibleNumber 1;}for(let i numsLength; i this.visibleMax;i){nums.push(i);}return nums;}},methods:{handleClick(newPage){if(newPage 1){newPage 1;}else if( newPage this.pageNumber){newPage this.pageNumber}this.$emit(pageChange,newPage)}}
}
/scriptstyle langless scoped
import ~/styles/var.less;.pager-container{display: flex;justify-content: center;margin: 20px 0;cursor: pointer;a{color: danger;margin:0 6px;.disabled {color: blue;cursor: not-allowed;}.active{color: green;font-weight: bold;cursor: text;}}}
/style
———————————————————————————————————————————
感谢初琰丶提供的封面
