Vue fenye（翻頁）是一個基于Vue.js的分頁組件。在前端開發中，經常需要分頁來處理大量數據的展示。Vue fenye的特點是簡單易用、響應式、樣式可定制。下面我們來看一下如何使用Vue fenye。

安裝

npm install vue-fenye

使用

在Vue項目中引入Vue fenye：

import VueFenye from 'vue-fenye'
Vue.use(VueFenye)

然后你就可以在模板中使用Vue fenye：

<template>
<vue-fenye
:current="currentPage"
:total="total"
:limit="limit"
@page-change="handleChange">
</vue-fenye>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
total: 100,
limit: 10
}
},
methods: {
handleChange(page) {
this.currentPage = page
}
}
}
</script>

其中，current表示當前頁碼，total表示總數據量，limit表示每頁顯示的數據量。當用戶點擊分頁按鈕時，page-change事件被觸發，你可以在該事件處理函數中更新當前頁碼。

樣式定制

Vue fenye提供了多個樣式類名，你可以通過修改這些類名來定制樣式：

• vf-fenye：分頁器容器
• vf-prev-btn：上一頁按鈕
• vf-next-btn：下一頁按鈕
• vf-page-item：頁碼按鈕
• vf-active：當前頁碼按鈕
• vf-disabled：不可點擊按鈕

例如，你可以把上一頁和下一頁按鈕的文字修改為中文：

.vf-prev-btn:before {
content: '上一頁';
}
.vf-next-btn:before {
content: '下一頁';
}

以上就是Vue fenye的基本用法和樣式定制。