@2alheure/vue-pagination 中文文档教程

Question

Vue.js Pagination

一个简单的 Vue.js 组件，有助于打印和处理分页。
此组件与 Vue 3 兼容。

• Vue.js Pagination
• Installation
• Usage
• Example
• Props
• Events

Installation

首先，您必须运行 npm install @2alheure/vue-pagination。
然后，您可以使用 import Pagination from "@2alheure/vue-pagination"; 导入它。

Usage

用两件事调用组件：

• a v-model directive, using a variable representing the active page (integer)
• a maxPage prop (integer) representing the max page number

Example

<Pagination v-model="page" :maxPage="10" />

<script>
  import Pagination from "@2alheure/vue-pagination";

  export default {
    components: {
      Pagination
    },
    data() {
      return {
        page: 3
      }
    }
  };
</script>

Props

Name	Type	Default value	Description
modelValue	Number	none	The prop linked to the v-model directive (mandatory).
maxPage	Number	none	The maximum number of pages (mandatory).
textColor	String	#4a5568	The color of the buttons' text.
backgroundColor	String	#fff	The color of the buttons' background.
borderColor	String	#e2e8f0	The color of the buttons' borders.
selectedTextColor	String	#f7fafc	The color of the text for the selected button.
selectedBackgroundColor	String	#4a5568	The color of the background for the selected button.
selectedBorderColor	String	#e2e8f0	The color of the borders for the selected button.
hoverTextColor	String	#f7fafc	The color of the text for the hovered button.
hoverBackgroundColor	String	#a0aec0	The color of the background for the hovered button.
hoverBorderColor	String	#e2e8f0	The color of the borders for the hovered button.
controlsHoverBorderColor	String	#cbd5e0	The color of the borders for the hovered "Previous" or "Next" buttons.

Events

Name	Value type	Value	Description
update:modelValue	Number	The page clicked	Emitted each time the page changes
prev	Number	The previous page number	Emitted when the "Previous" button is clicked
next	Number	The next page number	Emitted when the "Next" button is clicked