vue 分页组件_使用CSS框架tailwindcss构建的vue分页组件

vue 分页组件

vue-ads分页 (vue-ads-pagination)

Vue ads pagination is a vue js pagination component. On the left side you find some information about the shown items.

Vue广告分页是vue js分页组件。 在左侧，您可以找到有关所示项目的一些信息。

On the right side you can select a specific, the first, last, next or previous page.

在右侧，您可以选择特定页面，第一页，最后一页，下一页或上一页。

It uses the handy tailwind css library for styling.

它使用方便的顺风CSS库进行样式设置。

View demo 查看演示 Download Source 下载源

安装 (Installation)

You can install the package via npm or yarn.

您可以通过npm或yarn安装软件包。

NPM (NPM)

npm install vue-ads-pagination --save

npm install vue-ads-pagination --save

纱 (YARN)

yarn add vue-ads-pagination

yarn add vue-ads-pagination

用法 (Usage)

You can use the vue-ads-pagination component by using the following code in your project.

您可以通过在项目中使用以下代码来使用vue-ads-pagination组件。

<template>
  <div id="app">
    <vue-ads-pagination
        :page="3"
        :itemsPerPage="10"
        :maxVisiblePages="4"
        :totalItems="200"
        @pageChange="pageChange"
    />
  </div>
</template>

<script>
import VueAdsPagination from 'vue-ads-pagination';

export default {
    name: 'app',
    components: {
        VueAdsPagination,
    },

    methods: {
        pageChange (page, range) {
            console.log(page, range);
        },
    },
};
</script>

物产 (Properties)

property	required	default	description
page	false	0	A zero-based number to set the initial page
itemsPerPage	false	10	The max amount of items on one page
maxVisiblePages	false	5	The number of pages to be visible if their are too many pages
totalItems	true		The total amount of items

属性	需要	默认	描述
页	假	0	从零开始的数字以设置初始页面
每页项目	假	10	一页上的最大项目数
maxVisiblePages	假	5	页面过多时可见的页面数
totalItems	真正		项目总数

方法 (Methods)

method	parameters	description
pageChange	page, range	Emitted on creation, to know the initial state, and if another page is clicked. Two parameters are given: The zero-based page and the range. This is an object that contain the start and end keys. They contain a zero-based number to identify the items to be shown.

方法	参数	描述
pageChange	页面，范围	在创建时发出，以了解初始状态以及是否单击了另一个页面。 给出两个参数：从零开始的页面和范围。 这是一个包含开始和结束键的对象。 它们包含一个从零开始的数字，以标识要显示的项目。

测试中 (Testing)

We use the jest framework for testing this pagination component. Run the following command to test it:

我们使用jest框架来测试此分页组件。 运行以下命令进行测试：

npm run test:unit

问题 (Issues)

If you have any issues (bugs, features, ...) on the current project, add them here.

如果您在当前项目中有任何问题(错误，功能...)，请在此处添加。

翻译自: https://vuejsexamples.com/a-vue-pagination-component-build-with-the-css-framework-tailwindcss/

vue 分页组件