Vue.component('pagination', {
    template: '<div :class="mainClass" :id="randomId">\n'+
			  '  <a @click="onPrev()" href="javascript:void(0)" v-if="startPageIndex &gt; 1">&lt;&lt;</a>\n'+
			  '<template v-for="page in showPages">\n'+
			  '  <span :class="currentClass" v-if="page == pageIndex">{{page}}</span>\n'+
			  '  <a @click="onPage(page)" href="javascript:void(0)" v-if="page != pageIndex">{{page}}</a>\n'+
			  '</template>\n'+
			  '  <a @click="onNext()" href="javascript:void(0)" v-if="startPageIndex + pageNums &lt; totalPages">&gt;&gt;</a>\n'+
			  '</div>',
	props: {
		mainClass: {
				  type: String,
				  default:'scott'
				},
		currentClass: {
				  type: String,
				  default:'current'
				},
		currentPage: {
				  type: Number,
				  default: 1
				},
		pageSize: {
				  type: Number,
				  default: 20
				},
		total: {
				  type: Number,
				  default: 0
				}
    },
	data () {
      return {
        //每个编辑器生成不同的id,以防止冲突
        randomId: 'page_' + (Math.random() * 100000000000000000),
		pageIndex: 1,
		showPages: [1],
		pageNums: 8,    //显示分页数
		totalPages: 1,  //总页数
		startPageIndex: 1,
		pages: 1
      };
    },
	/*computed: {
		pages: function () {
			var t = parseInt(this.total);
			if(isNaN(t))
				t = 0;
			var s = parseInt(this.pageSize);
			if(isNaN(s))
				s = 1;
			var ps = parseInt(t / s);
			if(ps * s &lt; t)
				ps++;
			if(ps &lt;= 0)
				ps = 1;
			this.totalPages = ps;
			this.calcShowPages();
			return ps;
		}
	},*/
	watch: {
		total: function(value){
			this.calcPages();
		},
		pageSize: function(value){
			this.calcPages();
		},
		currentPage: function(value){
			this.pageIndex = value;
		}
	},
    mounted: function() {
		this.calcPages();
    },

    beforeDestroy: function() {
    },
    methods: {
		calcPages(){
			var t = parseInt(this.total);
			if(isNaN(t))
				t = 0;
			var s = parseInt(this.pageSize);
			if(isNaN(s))
				s = 1;
			var ps = parseInt(t / s);
			if(ps * s &lt; t)
				ps++;
			if(ps &lt;= 0)
				ps = 1;
			this.totalPages = ps;
			this.calcShowPages();
			this.startPageIndex = this.showPages[0];
		},
		onPrev(){
			var p = this.startPageIndex;
			p -= this.pageNums;
			if(p &lt; 1)
				p = 1;
			this.startPageIndex = p;
			
			var pp = [];
			var end = this.startPageIndex + this.pageNums - 1;
			if(end &gt; this.totalPages)
				end = this.totalPages;
			for(var i = this.startPageIndex; i &lt;= end; i++)
				pp.push(i);
			this.showPages = pp;
			this.onPage(this.showPages[0]);
		},
		onNext(){
			this.startPageIndex = this.startPageIndex + this.pageNums;
			
			var pp = [];
			var end = this.startPageIndex + this.pageNums - 1;
			if(end &gt; this.totalPages)
				end = this.totalPages;
			for(var i = this.startPageIndex; i &lt;= end; i++){
				pp.push(i);
			}
			this.showPages = pp;
			this.onPage(this.showPages[0]);
		},
        calcShowPages: function() {
			var pp = [];
			var ps = this.totalPages;
			if(ps &gt; this.pageNums){
				var start = this.showPages[0];
				if(start + this.pageNums &gt; ps){
					for(var i = start; i &lt; ps; i++)
						pp.push(i);
				}else{
					for(var i = 0; i &lt; this.pageNums; i++){
						pp.push(i + start);
					}
				}
			}else{
				for(var i = 0; i &lt; ps; i++)
					pp.push(i + 1);
			}
			this.showPages = pp;
        },
		onPage(val){
			var s = parseInt(val);
			if(isNaN(s))
				s = 1;
			this.pageIndex = s;
			this.$emit('page-change', s);
		}
    }
});