Vue封裝分頁元件

使用vue做雙向繫結的時候，可能經常會用到分頁功能

接下來我們來封裝乙個分頁元件

先定義樣式檔案 pagination.css

ul, li 

.page-bar 
.page-button-disabled 
.page-bar li 
.page-bar li:first-child > a 
.page-bar a 
.page-bar a:hover 
.page-bar .active a 
.page-bar i 
複製**

(function (vue)  else  else }}

while (left <= right) 
if (ar[0] > 1) 
if (ar[ar.length - 1] < this.all) 
return ar}},
methods: 
},nextpage: function (data) ,
prvepage: function (data) ,
// 設定按鈕禁用樣式
setbuttonclass: function (isnextbutton) 
else }}
})vue.pagination = pagination
})(vue)
複製**

接下來我們測試下效果

"cur" :all.sync="all" v-on:btn-click="listen">
}複製**

vue 封裝元件

一 通過install 封裝 1 建立元件資料夾包含 vue檔案和對應的.js檔案 如圖 2 完成元件模板 這是乙個公共元件內容 3 在相應的js內註冊元件 list.js檔案 import mylist from list.vue const list export default list 匯入...

分頁元件 vue

專案開發中，經常會遇到分頁功能，也會經常涉及元件化開發和元件復用，下列用vue對分頁元件進行了簡單封裝，具體 如下 源 2 pagination.vue 片段 3 pagination.css 片段 ul,li page bar page button disabled page bar li pa...

封裝element分頁元件

將 element ui 中分頁封裝成公共元件 admin後台中會有很多的 以及分頁的應用，所以考慮將分頁分裝成公共元件 封裝元件 vue頁面 background background current page.sync currentpage page size.sync pagesize la...