vue封装分页组件pagination(可跳转界面)

最近新做项目前端要用到分页查询，如果不进行封装的话，代码过于冗余，所以进行了封装，可以跳转界面，修改每页显示数量

封装的js代码如下

(function (vue) {
    // html模板信息
    var template = '<div class="page-bar"> \
    	  <div class="page-list"> \
    				   <span>共{{ totalPage }}页 / {{ all }}条</span>\
    				   <span class="page-item" v-on:click="btnClick(1)">首页</span>\
                       <span class="page-item" :class="{disabled: currentPage === 1}" v-on:click="prvePage(cur)">上一页</span> \
    				   <span class="page-ellipsis" v-if="showPrevMore" >...</span>\
                       <span class="page-item" v-for="index in indexs"  v-bind:class="{ active: cur == index }" v-on:click="btnClick(index)"> \
                          {{ index < 1 ? "..." : index }} \
                       </span> \
    					<span class="page-ellipsis" v-if="showNextMore">...</span>\
                        <span class="page-item" :class="{disabled: currentPage === totalPage}" v-on:click="nextPage(cur)">下一页</span> \
    					<span class="page-item" v-on:click="btnClick(totalPage)">末页</span>\
				    	<select class="page-select form-control"  v-model="pagesize">\
						  <option v-for="size in pageSizeArray" :key="size" :value="size">{{ size }}条/页</option>\
						</select>\
    					<span class="ml20">跳至</span>\
				    	<span class="page-jump-to"><input type="type" v-model="jumpPageNumber"></span>\
				    	<span>页</span>\
						<span class="page-item jump-go-btn" @click="btnClick(jumpPageNumber)">GO</span>\
                     </div> \
                   </div>'
    var pagination = vue.extend({
        template: template,
        data () {
            return {
              currentPage: this.cur,
              pagesize: this.pageSizeArray[0],
              jumpPageNumber: 1,
              showPrevMore: false,
              showNextMore: false
            }
        },
        props: {
			cur: { //当前页面
				type: Number,
				default: 1
			},
			pageSizeArray: { //每页显示数量
				type: Array,
				default () {
					return [15, 20, 25, 30,50]
				}
			},
			all: { //总条数
				type: Number,
				default: 1000
			},
			pageGroup: { //连续页码个数
				type: Number,
				default: 5
			},
		},
        
        computed: {
        	totalPage() { //总页数
				return Math.ceil(this.all / this.pagesize);
			},
            indexs: function () {
				const totalPage = this.totalPage
				const groupArray = []
				const pageGroup = this.pageGroup
				const _offset = (pageGroup - 1) / 2
				let current = this.cur
				const offset = {
					start: current - _offset,
					end: current + _offset
				}
				if (offset.start < 1) {
					offset.end = offset.end + (1 - offset.start)
					offset.start = 1
				}
				if (offset.end > totalPage) {
					offset.start = offset.start - (offset.end - totalPage)
					offset.end = totalPage
				}
				if (offset.start < 1) offset.start = 1
				this.showPrevMore = (offset.start > 1)
				this.showNextMore = (offset.end < totalPage)
				for (let i = offset.start; i <= offset.end; i++) {
					groupArray.push(i)
				}
                return groupArray
            },
        	
        },
        methods: {
            // 页码点击事件
            btnClick: function (pageNumber) {
            	 if (pageNumber< 1 || pageNumber>this.totalPage){
            		 swal("页码不符合");
            		 this.jumpPageNumber=1
            		 return;
            	 }
                    this.currentPage = pageNumber
                    this.jumpPageNumber=pageNumber
                  //父组件通过change方法来接受当前的页码
                  this.$emit('btn-click', {currentPage: this.currentPage, currentSize: this.pagesize})
            	
            },
           
            // 下一页
            nextPage: function (data) {
            	if (this.cur >= this.totalPage) return;
            	this.btnClick(this.cur + 1);
            },
            // 上一页
            prvePage: function (data) {
                if (this.cur <= 1) return;
                this.btnClick(this.cur - 1);
            },
            // 设置按钮禁用样式
            setButtonClass: function (isNextButton) {
                if (isNextButton) {
                    return this.cur >= this.all ? "page-button-disabled" : ""
                }
                else {
                    return this.cur <= 1 ? "page-button-disabled" : ""
                }
            }
        },
        watch: {
        	pagesize(newValue, oldValue) {
        		if(newValue !== oldValue){
        	        if(this.currentPage >= this.totalPage){ //当前页面大于总页面数
        	          this.currentPage = this.totalPage
        	        }
        	        this.btnClick(1);

			}
		}
        },
    })

    vue.Pagination = pagination

})(Vue)

html界面要是调用的话引用先引用上面的js
然后界面引用下边代码，currpage为当前页码totalcount为查询的数据总数
listen为当点击页码或改变每页数量时执行的方法，

<div class="page-helper">
     <vue-pagination :cur.sync="currpage" :all.sync="totalcount"  v-on:btn-click="listen" ></vue-pagination>
 </div>

并且需要在vue中调用组件

 components: {
     // 引用组件
        'vue-pagination': Vue.Pagination
    },

分页的样式如下，有可能会有多余的代码，那是我其他项目特殊要求的，大家可以忽略

ul, li {
    margin: 0px;
    padding: 0px;
}

.page-bar {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.page-button-disabled {
    color:#ddd !important;
}

.page-bar li {
    list-style: none;
    display: inline-block;
}

.page-bar li:first-child > a {
    margin-left: 0px;
}

.page-bar a {
    border: 1px solid #ddd;
    text-decoration: none;
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    cursor: pointer;
}

.page-bar a:hover {
    background-color: #eee;
}

.page-bar .active a {
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}

.page-bar i {
    font-style: normal;
    color: #d44950;
    margin: 0px 4px;
    font-size: 12px;
}

  .page-helper {
    font-weight: 500;
    height: 40px;
    text-align: center;
    color: #888;
    margin: 10px auto;
  }
  .page-list {
    font-size: 0;
    height: 50px;
    line-height: 50px;
  }
  .page-list span {
    font-size: 14px;
    margin-right: 5px;
    user-select: none;
  }
  .page-list .page-item {
    border: 1px solid #aaa;
    padding: 5px 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 5px;
  }
  .page-ellipsis {
    padding: 0 8px;
  }
  .page-jump-to input {
    width: 45px;
    height: 26px;
    font-size: 13px;
    border: 1px solid #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
  }
  .page-list .jump-go-btn {
    font-size: 12px;
  }
  .page-select{
    border: 1px solid #aaa;
    padding: 5px 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 5px;
    margin-left: 5px;
  }
  .page-list .page-item .disabled{
    pointer-events: none;
    background: #ddd;
  }
  .page-list .page-current {
    cursor: default;
    color: #fff;
    background: #337ab7;
    border-color: #337ab7;
  }
  
  
  
  
ul,li,span,input,select{
    margin:0;
    padding:0;
}
ul{
    list-style: none;
}
li{
    float:left;
    margin-right:10px;
    font-size:14px;
}
a{
    text-decoration: none;
    color:black;
}
.fPage{
    margin:100px 200px;
}
.fPage ul>li>a{
    border:1px solid #C3C9D3;
    text-align:center;
    color: #656565;
    padding: 6px 12px;
}
.pageNum .active{
    background-color: #1B6FEC;
    color:white;
}
.fPage .showPageNum>select{
    padding: 6px 10px;
    margin-top:-6px;
}
.fPage .selectPageNum{
    margin-top:-5px;
}
.fPage .selectPageNum>input{
    width:20px;
    padding: 5px 8px;
}
.disabled{
    outline:0 none;
    cursor:default;
    opacity: 0.4;
    /*filer:alpha(opacity=40);*/
    pointer-events: none;
}

这也是我项目完成后期整理的，有可能不完整，大家有什么意见直接提