介紹一下,已經(jīng)有很多的vue分頁的組件了,大家都是大同小易,那么我就結(jié)合自身的使用,寫出了一片文章
成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供聶拉木網(wǎng)站建設(shè)、聶拉木做網(wǎng)站、聶拉木網(wǎng)站設(shè)計、聶拉木網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、聶拉木企業(yè)網(wǎng)站模板建站服務(wù),十多年聶拉木做網(wǎng)站經(jīng)驗,不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
首先在新建一個分頁模塊
在模塊中引入相應(yīng)的代碼,(內(nèi)有詳細(xì)的注釋)
template中
<div class="page-bar"> <ul> <li class="first"> <span>共{{dataNum}}條記錄 第 {{cur}} / {{all}} 頁</span> </li> <li v-if="cur>1"> <a v-on:click="cur--,pageClick()"><</a>//點擊上一頁 </li> <li v-if="cur==1"> <a class="banclick"><</a>//點擊第一頁時顯示 </li> <li class="li_a" v-for="index in indexs" v-bind:class="{ 'active': cur == index}"> <a v-on:click="btnClick(index)">{{ index }}</a>//頁碼 </li> <li v-if="cur!=all"> <a v-on:click="cur++,pageClick()">></a>//點擊下一頁 </li> <li v-if="cur == all"> <a class="banclick">></a> //點擊最后一頁時顯示 </li> <li class="last_li"> <span>共<i>{{all}}</i>頁</span> // 共有多少頁 </li> </ul> </div>
style中的內(nèi)容
.page-bar a { width: 34px; height: 34px; border: 1px solid #ddd; text-decoration: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); /*margin-left: -1px;*/ line-height: 34px; color: #333; cursor: pointer } .page-bar .li_a a:hover { background-color: #eee; border: 1px solid #40A9FF; color: #40A9FF; } .page-bar a.banclick { cursor: not-allowed; } .page-bar .active a { color: #fff; cursor: default; background-color: #1890FF; border-color: #1890FF; } .page-bar i { font-style: normal; color: #d44950; margin: 0px 4px; font-size: 14px; }
script
export default { //顯示的聲明組件 name: "paging", //從父級組件中傳值過來的,你可以自己設(shè)置名字,但是需要跟父級傳入的名字一致! props : ["dataAll","dataCur","datanum","dataDatanum"], data() { return { all: this.dataAll, //總頁數(shù) cur: this.dataCur ,//當(dāng)前頁碼 num: this.datanum , //一頁顯示的數(shù)量 奇數(shù) dataNum: this.dataDatanum,//數(shù)據(jù)的數(shù)量 } }, watch: { cur: function(oldValue, newValue) { //父組件通過change方法來接受當(dāng)前的頁碼 this.$emit('change', oldValue) //這里是直接點擊執(zhí)行函數(shù) } }, methods: { btnClick: function(data) { //頁碼點擊事件 if(data != this.cur) { this.cur = data } }, pageClick: function() { console.log('現(xiàn)在在' + this.cur + '頁'); //父組件通過change方法來接受當(dāng)前的頁碼 //這里是點擊下一頁執(zhí)行函數(shù) this.$emit('change', this.cur) } }, computed: { indexs: function() { var left = 1; var right = this.all; var ar = []; if(this.all >= this.num ) { if(this.cur > 3 && this.cur < this.all - 2) { left = this.cur - (this.num-1)/2 right = this.cur + (this.num-1)/2 } else { if(this.cur <= 3) { left = 1 right = this.num } else { right = this.all left = this.all - (this.num - 1); } } } while(left <= right) { ar.push(left) left++ } return ar } } }
父級的組件內(nèi)容
<template> //這是我自己設(shè)置的,可以根據(jù)情況不用設(shè)置不同的樣式 <div class="page"> //這里時通過props傳值到子級,并有一個回調(diào)change的函數(shù),來獲取自己傳值到父級的值 <paging :dataAll="all" :dataCur="cur" :datanum="num" :dataDatanum="dataNum" @change="pageChange"></paging> </div> </template> <style scoped> .page { width: 100%; min-width: 1068px; height: 36px; margin: 40px auto; } </style> <script> import Paging from './paging' export default { name: "homepage", components: { Paging }, data() { return { all: 40, //總頁數(shù) cur: 1, //當(dāng)前頁碼 num: 7, //一頁顯示的數(shù)量 必須是奇數(shù) dataNum: 400, //數(shù)據(jù)的數(shù)量 } }, methods: { //子級傳值到父級上來的動態(tài)拿去 pageChange: function(page) { this.cur = page } } } </script>
最后重新保存,重新運行
npm run dev
注意
可以根據(jù)自己喜好來自己動手做一個分頁,我在其它人的基礎(chǔ)之上添加了頁碼以及當(dāng)前頁面數(shù),也可以添加跳轉(zhuǎn)的頁數(shù)(暫時沒有做),也可以更改css樣式來改變!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
文章名稱:vue中的自定義分頁插件組件的示例
本文來源:http://bm7419.com/article26/igcdjg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計公司、虛擬主機、小程序開發(fā)、外貿(mào)建站、電子商務(wù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)