crt设置分页_具有许多出色设置的智能分页

crt设置分页

Vue智能分页 (Vue-smart-pagination)

A data pagination component that splits any data into pages and has many settings.

数据分页组件，可将任何数据拆分为页面并具有许多设置。

All data is stored in an array and can have any values.

所有数据都存储在数组中，并且可以具有任何值。

安装 (Installation)

安装NPM软件包。 (Install NPM package.)

$ npm install vue-smart-pagination --save

Register the component globally in your main.js file.

在main.js文件中全局注册该组件。

import { PaginationControl, PaginationPage } from 'vue-smart-pagination'
Vue.component('PaginationControl', PaginationControl)
Vue.component('PaginationPage', PaginationPage)

Or register the component locally in your vue file.

或在vue文件中本地注册组件。

import { PaginationControl, PaginationPage } from 'vue-smart-pagination'
components: {
    PaginationPage,
    PaginationControl
},

用法 (Usage)

Vue-smart-pagination contains two main components:

Vue智能分页包含两个主要组件：

PaginationPage - has content of the pages.

PaginationPage-具有页面内容。

PaginationControl - has content controls.

PaginationControl-具有内容控件。

Both components are registered globally after installing package.

安装软件包后，这两个组件都在全局注册。

Also we have props - :settings="settings” which has two main objects - PaginationControlSettings и PaginationPageSettings.

我们还有道具 - :settings="settings” ，它有两个主要对象PaginationControlSettings和PaginationPageSettings 。

PaginationControlSettings contains settings related to buttons, arrows, dots and the start page.

PaginationControlSettings包含与按钮，箭头，点和起始页有关的设置。

PaginationPageSettings contains settings related to the page, the spinner and animation of the content change.

PaginationPageSettings包含与页面，微调器和内容更改动画有关的设置。

Array arrayData serves to output data to the page and is required to fill.

Array arrayData用于将数据输出到页面， is required to fill 。

Example:

例：

<template>
  <div id="app">
    <pagination-page :settings="settings">
      <div slot="page" slot-scope="item">
        <div>{{item.originalEvent.data}}</div>
      </div>
    </pagination-page>
    <pagination-control :settings="settings" />
  </div>
</template>

<script>
import { PaginationControl, PaginationPage } from 'vue-smart-pagination'

export default {
  name: 'App',
  components: {
    PaginationPage,
    PaginationControl
  },
  data: function () {
    return {
      arrayData: [
        {
          data: 'Page № 1'
        },
        {
          data: 'Page № 2'
        },
        {
          data: 'Page № 3'
        },
      ]
    }
  },
  computed: {
    settings: function () {
      return {
        arrayData: this.arrayData
      }
    }
  }
}
</script>

Adding Data to a Component:

向组件添加数据：

In the array arrayData we add data and output them to the <pagination-page>. When referring to an array of elements, specify the originalEvent property to display the current data. To display simple data, use <div>, and for components use <component>.

在数组arrayData我们添加数据并将其输出到<pagination-page> 。 引用元素数组时，请指定originalEvent属性以显示当前数据。 要显示简单数据，请使用<div> ，对于组件请使用<component> 。

<div slot =" page "slot-scope =" item "> </ div> is required.

<div slot =" page "slot-scope =" item "> </ div>是必需的。

Example:

例：

import testComponent from 'testComponent'

export default {
  components: {
    testComponent
  }
}

arrayData: [
  {
    data: 'apple',
    component: 'testComponent'
  }
]

<pagination-page :settings="settings">
  <div slot="page" slot-scope="item">
    <div>{{item.originalEvent.data}}</div>
    <components :is="item.originalEvent.component"></components>
  </div>
</pagination-page>

To display the pagination buttons, insert the pagination-control component into the template.

要显示分页按钮，请将pagination-control组件插入模板。

Example:

例：

<pagination-control :settings="settings" />

道具 (Props)

方法 (Methods)

To call a custom method, when switching pages, in the <pagination-control /> component in the action callMethod, you must pass a user-defined function that is declared in the methods object.

要在切换页面时调用自定义方法，请在操作callMethod的<pagination-control />组件中传递一个在方法对象中声明的用户定义函数。

Example:

例：

<pagination-control @callMethod =" showText "/>

methods: {
  showText: function (e) {
    console.log (e)
  }
}

浏览器 (Browsers)

Vue-smart-pagination has been successfully tested in browsers such as:

Vue-smart-pagination已在以下浏览器中成功测试：

• Chrome (66.0)

  Chrome(66.0)

• Safari (11.1)

  Safari(11.1)

• Opera (52.0)

  歌剧(52.0)

• Firefox (59.0.2)

  Firefox(59.0.2)

• Edge (16)

  边缘(16)

翻译自: https://vuejsexamples.com/a-data-pagination-component-that-splits-any-data-into-pages-and-has-many-settings/

crt设置分页