vue2.0自定义分页组件

vue2.0自定义分页组件
显示效果：

调用分页组件的方法

<div class="data-page">
      <div>
        <el-pagination
          background
          layout="sizes,prev, pager, next"
          :total="page.total"
          :page-sizes="[5,10, 15, 20, 50]"
          :current-page.sync="page.pageNum"
          :page-size.sync="page.pageSize"
          @size-change="init"
          @current-change="init"
        />

        <pageBar
        :total.sync="page.total"              
        :pageNum.sync="page.pageNum"
        :pageSize="page.pageSize"
        :color="page.color"
        :changePageNum="changePageNum"
        :refreshData="init">
        </pageBar>

   </div>
</div>
//导入分页栏组件
import pageBar            from '@/components/table_ex/cwgisPageBar';
//
export default{
components: {    
    pageBar,
},
data() {
    return {
      tableData: [],
      searchValue:'',
      page: {        
        count: 3,     //总页数
        total: 15,    //总个数
        pageSize: 5,  //每页个数
        pageNum: 1,   //当前页
        color:'000000',
        //
      },
      //
    };
  },
  methods: {
      changePageNum(t_pageNum)
      {
          this.page.pageNum=t_pageNum;
      },
      init() 
      {
	      var that = this;
	      var userAcc = api.getLoginAccount();
	      var userName = api.getLoginName();
	      //
	      //组合查询sql语句
	      var sql = "select * from xc_wg_wgxx ";
	      if(that.searchValue && that.searchValue!="")
	      {
	          sql+=" where mc like '%"+that.searchValue+"%'";
	      }
	      sql+=" order by id desc";
	      //
	      api.getDataPage_sql(
	        sql,
	        this.page.pageSize,
	        this.page.pageNum,
	        function (r) {
	          // debugger;
	          if (r.success) {
	            that.tableData = r.data.rows;
	            that.page.total = r.data.total;
	          } else {
	            alert(r.msg);
	          }
	        }
	      );
      },    
  }
}

自定义的分页组件cwgisPageBar.vue

<template>
  <!--分页-->
  <div>
    <img :src="haseFirst? 'images/pagebar/first.png':'images/pagebar/first_h.png'" @click="gotoFirstPage" :style="firstSylye">
    <img :src="haseFirst? 'images/pagebar/pre.png':'images/pagebar/pre_h.png'" @click="pageSub" :style="firstSylye">
    <input ref="refindex" type="text" v-model="pageNum" @blur="checkpageTemIndex">
    <span> / {{count}}页 总{{total}}</span>
    <img :src="haseLast? 'images/pagebar/next.png':'images/pagebar/next_h.png'" @click="pageAdd" :style="lastSylye">
    <img :src="haseLast? 'images/pagebar/last.png':'images/pagebar/last_h.png'" @click="gotoEndPage" :style="lastSylye">
  </div>
</template>

<script>
  export default {
    name: "cwgisPageBar",
    props: ['page-sizes','total','pageSize','pageNum','refreshData','changePageNum','color'],
    data() {
      return {
        firstSylye:'',
        lastSylye:'',
        haseFirst:false, //第一页
        haseLast:false,  //最后一页
        //
        count:3,   //总页数
      }
    },
    watch: {
      'pageNum'() {
       this.checkPageIndex();
      },
      'count'() {
        this.checkPageIndex();
      },
      'total'() {
        this.totalChange();
      },
    },
    created() {
      // if (this.page) {
      //   this.pageTem = this.page;
      // }
      this.checkPageIndex();
    },
    mounted(){
        var t_color=this.color;
        if(!t_color)
        {
            t_color="000000";
        }
        this.$refs.refindex.style.color="#"+t_color;
    },
    methods: {
      gotoFirstPage()
      {         
         this.changePageNum(1);
         this.refreshData();
      },
      gotoEndPage()
      {         
         this.changePageNum(this.count);
         this.refreshData();
      },
      totalChange()
      {
          this.count = Math.ceil(this.total/this.pageSize);
          this.checkPageIndex();
      },
      checkpageTemIndex() {
        this.pageTemAdd(this.pageNum, 0);
        this.refreshData();
      },
      checkPageIndex(){        
        this.haseFirst = this.pageNum > 1;
        this.haseLast = this.pageNum < this.count;
        if(this.haseFirst){
          this.firstSylye = 'cursor: pointer;';
        }else{
          this.firstSylye = 'cursor: not-allowed;';
        }

        if(this.haseLast){
          this.lastSylye = 'cursor: pointer;';
        }else{
          this.lastSylye = 'cursor: not-allowed;';

        }
        this.setInputWidth();
      },
      /**
       * 设置输入框宽度
       */
      setInputWidth() {
        let refindex = this.$refs.refindex;
        if( refindex && refindex.style){
          let width = (this.pageNum + "").length * 13;
          if (width > 30) {
            refindex.style.width = width + "px";
          }else{
            refindex.style.width = 30 + "px";
          }
        }
      },
      pageAdd()
      {
          this.pageTemAdd(this.pageNum,1);
      },
      pageSub()
      {
          this.pageTemAdd(this.pageNum,-1);
      },
      //页面相加 或者 相减
      pageTemAdd(index, num) {
        var t_num=this.pageNum;
        if (index * 1 + num * 1 >= this.count * 1) {
          t_num = this.count * 1;   //最大页数
        } else if (index * 1 + num * 1 <= 1) {
          t_num = 1;                //最小页数
        } else {
          t_num = this.pageNum * 1 + num * 1;   //中间页数
        }
        //this.pageNum=t_num; //单向传值 改为changePageNum来传值
        if(t_num!=this.pageNum)
        {
            this.changePageNum(t_num);
            this.refreshData();
        }
      }
    }
  }
</script>

<style scoped>
  img {
    margin-left: 14px;
    cursor: pointer;

  }

  input[type="text"] {
    width: 24px;
    text-align: center;
    height: 20px;
    border: 1px solid #FFFFFF;
    background: 0 0;
    color: #FFFFFF;
    margin-left: 14px;
  }
</style>

—the—end—