Vue中简单的翻页组件

翻页组件化非常方便，考虑到通用性，传递参数有三个：pageNum、pageTotal、url。

先上html中的代码：

<turn-page 
    id="turn-page" 
    :pn="pageNum" 
    :pt="pageTotal" 
    :url="'demo.html?pageNum='"
></turn-page>

pageNum：当前页号

pageTotal：全部页总数

url：待翻页的Url链接及附带参数

下面是组件JS：

Vue.component('turn-page',{
	props:['pn','pt','url'],
	data() {
        return {
        	pageNum : 0
        }
    },
    template:`
        <div class="page_style">
			<a v-if="pn > 1" :href="url + (pn - 1)">&laquo;上一页</a>
			<span v-else>首页</span>
			<span>第 {{pn}} 页 / 共 {{pt}} 页</span>
			<a v-if="pn != pt" :href="url + (pn - 0 + 1)">下一页&raquo;</a>
			<span v-else>末页</span>
			<span class="r">
                跳转到<input :placeholder="pn" type="number" min="1" :max="pt" v-model="pageNum" />页
                <button @click="changePage(url,pt)">确定</button>
            </span>
		</div>
    `,
    mounted(){
    },
    methods : {
    	changePage : function(url,total){
    		if(this.pageNum < 1){
    			this.pageNum = 1;
    		}else if(this.pageNum > total){
    			this.pageNum = total;
    		}
    		window.location.href = url + this.pageNum;
    	}
    }
});