Vue练习3：组件开发3（页面切换）-编程知识

Vue练习3：组件开发3（页面切换）

预览

———————————————————————————————————————————

组件文档

Pager组件

属性

属性名	含义	类型	必填	默认值
current	当前页码（总数据量/单页容量）	Number	否	1
total	总数据量	Number	否	0
limit	单页容量	Number	否	10
visibleNumber	可见页码数	Number	否	10

事件

事件名	含义	事件参数	参数类型
pageChange($event)	页码变化event为当前页码	新的页码	Number

功能

首页跳转，单页跳转，末页跳转

每次必显示可见页码数

组件第一层未设置样式（pager-container）

———————————————————————————————————————————

注释代码

<template><div class="pager-container" v-if="pageNumber > 1">    //只有页面大于1才显示页码<a @click="handleClick(1)" :class="{ disabled: current === 1}">|&lt;&lt;</a>  <a @click="handleClick(current - 1)" :class="{ disabled: current === 1}">&lt;&lt;</a><a @click="handleClick(item)" v-for="(item,i) in numbers" :key="i" :class="{ active: item === current }">{{ item }}</a><a @click="handleClick(current + 1)" :class="{ disabled: current === pageNumber }">&gt;&gt;</a><a @click="handleClick(pageNumber)" :class="{ disabled: current === pageNumber }">&gt;&gt;|</a></div>
</template><script>
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(min<1){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) //组件向外传递}}
}
</script><style lang="less" 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>

———————————————————————————————————————————

可编译代码

<template><div class="pager-container" v-if="pageNumber > 1"><a @click="handleClick(1)" :class="{ disabled: current === 1}">|&lt;&lt;</a><a @click="handleClick(current - 1)" :class="{ disabled: current === 1}">&lt;&lt;</a><a @click="handleClick(item)" v-for="(item,i) in numbers" :key="i" :class="{ active: item === current }">{{ item }}</a><a @click="handleClick(current + 1)" :class="{ disabled: current === pageNumber }">&gt;&gt;</a><a @click="handleClick(pageNumber)" :class="{ disabled: current === pageNumber }">&gt;&gt;|</a></div>
</template><script>
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(min<1){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)}}
}
</script><style lang="less" 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>

———————————————————————————————————————————

感谢@初琰丶提供的封面