VUE 自定义插件Page

记录自己遇到的问题，以备查询。

<template>
    <div class="container">
      <div class="head">
        <span>{{totals}}条</span>/<span>{{pageCount}}页</span>
      </div>
      <ul class="noselect">
        <li @click="first">首页</li>
        <li @click="pre">上一页</li>
        <template v-for="page in pagers">
          <li @click="changeCurPage(page)" :class="{'dp':page == activePage}">{{page}}</li>
        </template>
        <li @click="next">下一页</li>
        <li @click="last">尾页</li>
        <li class="ms">到</li>
        <li class="in"><input v-model="toPage" @keyup.enter="go" @input="handleInput"/></li>
        <li @click="go">GO</li>
        <div style="clear: both;"></div>
      </ul>
      <div style="clear: both;"></div>
    </div>
</template>

<script>
  export default {
    name: 'Page',
    data(){
      return{
        toPage:null,
        pagerCount:0,//显示页码数
        pageCount:0,//总页数
        activePage:1,//当前页码
      }
    },
    props:{
      totals:{
        type:Number|String,
        default: 0,
      },
      currentPage:{
        type:Number|String,
        default: 1,
      },
      pageSize:{
        type:Number|String,
        default: 10,
      },
      pager:{
        type:Number|String,
        validator(value) {
          return (value | 0) === value && value > 4 && value < 22 && (value % 2) === 1
        },
        default: 7,
      },
    },
    watch:{
      activePage:{
        handler(val) {
          this.$emit('current-change',val)
        }
      },
      currentPage: {
        type:Number,
        //immediate: true,
        handler(val) {
          this.activePage = val
        }
      },
      pageSize: {
        type:Number,
        //immediate: true,
        handler(val) {
          this.$emit('page-size-change',val)
        }
      },
      pager: {
        type:Number,
        immediate: true,
        handler(val) {
          this.pagerCount = val % 2 == 0 ? val + 1 : val
        }
      },
    },
    computed:{
      pagers(){
        let _pagers = []
        //总页数
        this.pageCount  = Math.ceil(this.totals / this.pageSize)

        let offset = (this.pagerCount - 1) / 2

        let startPage = this.activePage - offset;
        startPage = startPage < 1 ? 1:startPage

        let endPage;

        if(this.pageCount <= this.pagerCount){
          endPage = this.pageCount
          startPage = 1
        }else{
          endPage = this.activePage + offset
          endPage = endPage > this.pageCount ? this.pageCount:endPage
        }

        if(startPage == 1 && endPage == this.pageCount){
          for (let i = startPage; i <= this.pageCount; i++) {
            _pagers.push(i)
          }
        }else if(startPage == 1 && endPage < this.pageCount){
          for (let i = startPage; i <= this.pagerCount; i++) {
            _pagers.push(i)
          }
        }else if(startPage > 1 && endPage == this.pageCount){
          for (let i = this.pageCount - this.pagerCount + 1; i <=  this.pageCount; i++) {
            _pagers.push(i)
          }
        }else{
          for (let i = startPage; i <= endPage; i++) {
            _pagers.push(i)
          }
        }
        return _pagers
      }
    },
    methods:{
      handleInput(e){
        this.toPage = e.target.value.replace(/[^\d]/g,'');
      },
      changeCurPage(activePage){
        this.activePage = activePage
      },
      //下一页
      next(){
        if(this.activePage == this.pageCount){
          return
        }
        this.activePage = this.activePage + 1
      },
      //上一页
      pre(){
        if(this.activePage == 1){
          return
        }
        this.activePage = this.activePage - 1
      },
      first(){
        this.activePage = 1
      },
      last(){
        this.activePage = this.pageCount
      },
      //页码跳转
      go(){
        if(!this.toPage){return}

        this.toPage = parseInt(this.toPage)
        if(this.toPage < 1){
          this.activePage = 1
        }else if(this.toPage > this.pageCount){
          this.activePage = this.pageCount
        }else{
          this.activePage = this.toPage
        }
        this.toPage = this.activePage
      },

    }
  }
</script>

<style scoped>
  .container{padding-top: 20px;padding-right: 19px;padding-bottom: 20px;}
  li{cursor: pointer;list-style: none;float: left;color: #808080;border: 1px solid #cccccc;padding: 2px 10px;margin: 0 3px;font-size: 14px;}
  li:hover{background: #34a6e3;color: #FFF;border: 1px solid #34a6e3;}
  li.ms:hover{color: #808080;border: none;background: #FFF;}
  li.dp{background: #34a6e3;color: #FFF;border: 1px solid #34a6e3;}
  li.ms{border: none;padding: 2px 5px;}
  li.in{border: none;padding: 0;}
  li.in input{width: 40px;padding: 5px 10px;border: 1px solid #cccccc;}
  li.in input:hover{border-color: #409eff;}
  li.in input:focus {outline: 0;border-color: #409eff;}

  .head{float: left;padding: 2px 0px;margin: 0 5px;}
  .head span {padding: 2px 3px;}

  .noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently*/
  }
</style>