vue実装ページングソース

小さい女子は才能がなくて、カスタマイズのページ、もし不当なところがあるならばまた大きい人の指摘を望んで、もっと良い方法があってまた伝言の1、htmlを望みます

二、cssは個人の好みによって、スタイルをカスタマイズする

三、重要なjs

	export default{
		data(){
			return{
				pageCount:4, //           
				currentPage:1, //       
				toatalNum:8, //        ，         ，     
				pageSize:1, //         ，         
				totalPages:8, //      
				indexs:'', //                  
				minPage:'', //           
				data:'' //      
			}
		},
		mounted(){
			var that = this
			that.setPageNumber() //          1  
		},
		methods:{
			setPageNumber(){
				var that = this
				that.indexs = [];
				var long = that.currentPage + that.pageCount;
				for(var i = that.currentPage;i<long;i++){
					if(i == that.currentPage){
						that.indexs.push({
							isShow : true,
							number : i
						})
					}else{
						that.indexs.push({
							isShow:false,
							number:i
						})
					}					
				}
			},
			mouseOver(index){ //      
				var that = this
				that.indexs[index].isShow = true
			},
			mouseOut(index){//      
				var that = this
				if(that.indexs[index].number != that.currentPage){
					that.indexs[index].isShow = false
				}				
			},
			toPage(index){//          
				var that = this
				that.indexs[index].isShow = true;
				that.indexs.forEach((e,i)=>{
					if(e.number == that.currentPage){
						e.isShow = false
					}
				})
				that.currentPage = that.indexs[index].number
				that.minPage = that.indexs[0].number
			},
			toNextPage(){//           
				var that = this
				if(that.currentPage < that.totalPages){
					that.indexs.forEach((e,i)=>{
						if(e.number == that.currentPage){
							e.isShow = false
						}
					})
					that.currentPage++
				}else{
					that.currentPage = that.totalPages
					that.minPage = that.indexs[0].number
					return
				}
				if(that.currentPage > that.pageCount){
					that.indexs = [];
					var i = that.currentPage - that.pageCount+1
					for(i;i<=that.currentPage;i++){
						if(i == that.currentPage){
							that.indexs.push({
								isShow : true,
								number : i
							})
						}else{
							that.indexs.push({
								isShow : false,
								number : i
							})
						}
					}
				}
				that.indexs.forEach((e,i)=>{
					if(e.number == that.currentPage){
						e.isShow = true
					}
				})
				that.minPage = that.indexs[0].number				
			},
			toPrePage(){//           
				var that = this
				if(that.currentPage > 1){					
					that.indexs.forEach((e,i)=>{
						if(e.number == that.currentPage){
							e.isShow = false
						}
					})
					that.currentPage--
					if(that.currentPage >= that.indexs[0].number){
						that.indexs.forEach((e,i)=>{
							if(e.number == that.currentPage){
								e.isShow = true
							}
						})
						that.minPage = that.indexs[0].number
						return
					}
					var i = that.currentPage					
					var long = that.currentPage + that.pageCount;		
					that.indexs = [];
					for(i;i<long;i++){
						if(i==that.currentPage){
							that.indexs.push({
								isShow : true,
								number : i
							})
						}else{
							that.indexs.push({
								isShow : false,
								number : i
							})
						}
					}
					that.minPage = that.indexs[0].number
				}else{
					that.currentPage = 1
					that.minPage = that.indexs[0].number
					return
				}
			}
		}
	}