Vue.js實現(xiàn)一個自定義分頁組件vue-paginaiton
vue實現(xiàn)一個分頁組件vue-paginaiton
vue使用了一段時間的感觸就是，我再也不想直接操作DOM了。數(shù)據(jù)綁定式的編程體驗真是好。實現(xiàn)的一個分頁組件。
這里的css就不放出來了，可以看直接去github上下載：vue-pagination
先上一張實例圖吧
模版
<div class="page-bar">
<ul>
<li v-if="showFirstText"><a v-on：click="cur--">上一頁</a></li>
<li v-for = "index in pagenums">
<a v-on:click="pageChange(index)">{{index}}</a>
</li>
<li v-if="showNextText"><a v-on：click="cur++">下一頁</a></li>
<li><a>共<i>{{all}}</i>頁</a></li>
</ul>
</div>
在未引入js前,頁面的顯示,分析下,all字段簡單直接輸出即可,{{index}}是分頁碼這個需要一些動態(tài)的渲染。
var app = new Vue({
el: '#app',
data:{
currentpage: 1,
totlepage: 28,
visiblepage:10,
msg: ''
},
})
調(diào)用 new Vue({參數(shù)}) 就是創(chuàng)建了一個基本的組件,賦值給變量 app.el就是element的縮寫,定位模版的位置.data就是數(shù)據(jù)了.知道了總頁數(shù)但是要顯示頁碼還是要一番計算,所以顯示頁碼就是計算屬性了.所以我們要用computed
computed: {
//計算屬性：返回頁碼數(shù)組，這里會自動進行臟檢查，不用$watch();
pagenums: function(){
//初始化前后頁邊界
var lowPage = 1;
var highPage = this.totlepage;
var pageArr = [];
if(this.totlepage > this.visiblepage){//總頁數(shù)超過可見頁數(shù)時，進一步處理；
var subVisiblePage = Math.ceil(this.visiblepage/2);
if(this.currentpage > subVisiblePage && this.currentpage < this.totlepage - subVisiblePage +1){//處理正常的分頁
lowPage = this.currentpage - subVisiblePage;
highPage = this.currentpage + subVisiblePage -1;
}else if(this.currentpage <= subVisiblePage){//處理前幾頁的邏輯
lowPage = 1;
highPage = this.visiblepage;
}else{//處理后幾頁的邏輯
lowPage = this.totlepage - this.visiblepage + 1;
highPage = this.totlepage;
}
}
//確定了上下page邊界后，要準備壓入數(shù)組中了
while(lowPage <= highPage){
pageArr.push(lowPage);
lowPage ++;
}
return pageArr;
}
},
觀看html模版發(fā)現(xiàn)v-if指令.很明顯當內(nèi)容是true就輸出,否就沒。
重點看下
<li v-for="index in pagenums" v-bind:class="{ active: currentpage == index}">
<a v-on:click="pageChange(index)">{{ index }}</a>
</li>
v-for是循環(huán)渲染輸出計算屬性pagenums.每一次循環(huán)的子元素賦值給index v-bind:class綁定class,當渲染到目前的角標的時候加個class v-on:click是綁定了事件，我把index當參數(shù)傳進入了,后面做判斷，默認傳event事件.
然后我們Vue的選項里面再增加methods字段
methods:{
pageChange: function(page){
if (this.currentpage != page) {
this.currentpage = page;
this.$dispatch('page-change', page); //父子組件間的通信：==>子組件通過$diapatch(),分發(fā)事件，父組件冒泡通過v-on:page-change監(jiān)聽到相應的事件；
};
}
}
組件交互
組件寫完了，問題來了，用戶點擊發(fā)生頁面改變，你怎么通知其他組件作出相應的變化. 可以在頁角發(fā)生改變的函數(shù)下，插一條語句通知其他組件。不過這種方法是很差的做法。可以使用
watch: {
currentpage: function(oldValue , newValue){
console.log(arguments)
}
}
觀察了currentpage數(shù)據(jù)當它改變的時候，可以獲取前后值。然后通知其他組件。
完整的代碼可以看 github:vue-pagination
本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+vantUI3時間組件封裝過程支持選擇年以及年月日時分秒
這篇文章主要介紹了Vue3+vantUI3時間組件封裝過程支持選擇年以及年月日時分秒,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要給大家介紹了關(guān)于Vue2.x和Vue3.x的雙向綁定原理的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
本篇文章主要介紹了Vue自定義指令封裝節(jié)流函數(shù)的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue3+vite使用postcss-pxtorem、autoprefixer自適應和自動添加前綴
這篇文章主要介紹了vue3+vite使用postcss-pxtorem、autoprefixer自適應和自動添加前綴方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
最近寫代碼遇到一問題祖先級別的組件怎么操作孫子的兒子的組件方法，在網(wǎng)上搜了半天都是父子傳參，父子操作，暈暈乎乎的想起了bus，接下來通過本文給大家介紹vue?祖先組件操作后代組件方法,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue2中使用less簡易教程，由于不需要手動配置webpack，所以vue中使用less是非常簡單的，只需要安裝less，less-loadder就ok了2018-03-03
Vue Router的手寫實現(xiàn)方法實現(xiàn)
這篇文章主要介紹了Vue Router的手寫實現(xiàn)方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了詳解vue如何添加babel?polyfill實現(xiàn)方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要給大家介紹了如何利用vue.js實現(xiàn)拖放功能的相關(guān)資料，本文并未使用現(xiàn)有的庫，而是使用內(nèi)置的HTML拖放API來實現(xiàn)簡單的拖放系統(tǒng)，需要的朋友可以參考下2021-06-06
我們知道ref可以用于創(chuàng)建一個響應式數(shù)據(jù),而toRef也可以創(chuàng)建一個響應式數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于Vue3中ref與toRef區(qū)別的相關(guān)資料,需要的朋友可以參考下2021-06-06