Vue全局分页组件的实现代码

<template>  <div class="paging-content clearfix">    <div class="fl">      总共<b> {{total}} </b>条       <select v-model="limit">        <option>10</option>        <option>20</option>        <option>30</option>        <option>40</option>        <option>50</option>        <option>100</option>      </select>条/页    </div>    <div class="fr paging-box">      <a v-if="+no>1" class="fa fa-angle-double-left" @click="goToPage(1)"></a>      <a v-if="+no<=1" class="fa fa-angle-double-left"></a>      <a v-if="+no>1" class="fa fa-angle-left" @click="goToPage(+no - 1)"></a>      <a v-if="+no<=1" class="fa fa-angle-left"></a>      <a v-if="+no-2>1">...</a>      <a v-if="+no-2>0" @click="goToPage(+no-2)">{{+no - 2}}</a>      <a v-if="+no-1>0" @click="goToPage(+no-1)">{{+no - 1}}</a>      <a v-if="+no>0" style="color: #000;background: #eee;">{{no}}</a>      <a v-if="+no+1<=+sum" @click="goToPage(+no+1)">{{+no + 1}}</a>      <a v-if="+no+2<=+sum" @click="goToPage(+no+2)">{{+no + 2}}</a>      <a v-if="+no+2<=+sum-1">...</a>      <a v-if="+no<+sum" class="fa fa-angle-right" @click="goToPage(+no + 1)"></a>      <a v-if="+no>=+sum" class="fa fa-angle-right"></a>      <a v-if="+no<+sum" class="fa fa-angle-double-right" @click="goToPage(+sum)"></a>      <a v-if="+no>=+sum" class="fa fa-angle-double-right"></a>    </div>  </div></template>

<script>  module.exports = {    props: ['no', 'limit', 'total'],    computed: {      sum: function() {        return Math.ceil(this.total/this.limit);      }    },    methods: {      'goToPage': function(page_no) {        this.$dispatch('page-change', page_no);      }    },    watch: {      'limit': function(newVal, oldVal) {        if(newVal!=oldVal&&oldVal!=undefined) {          this.$dispatch('page-limit-change', newVal);        }      }    }  }</script>

<style lang="less" rel="stylesheet/less">  //定义了一个颜色参数文件，方便自定义颜色和管理，比如@color-white: #fff;  @import "../less/variables";   .paging-content {    > div {      font-size: 12px;      color: @color-text-normal;    }    select {      margin-right: 4px;    }    .fl {      float: left;    }    .fr {      float: right;    }    .paging-box {      border-top: 1px solid #ccc;      border-bottom: 1px solid #ccc;      border-left: 1px solid #ccc;      a {        display: inline-block;        width: 24px;        height: 24px;        border-right: 1px solid #ccc;        line-height: 24px;        text-align: center;        float: left;        color: @color-text-blue;        cursor: pointer;      }    }  }</style>

import page from 'example-page'

components:{  page: page},

<paging :no.sync="params.page_no" :limit.sync="params.page_limit" :total.sync="total_items"></paging>