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.

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

View demo 查看演示 Download Source 下载源

安装 (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)

Name	Type	All values	Default value	Description
PaginationControlSettings:
Buttons settings:
controlClass	String	-	-	Common class to the parent block with pagination buttons.
controlStyle	String	square, circle, default	default	Style of pagination buttons.
maxButtons	Number	-	5	The maximum number of pagination buttons on the page.
allpageButtonsStyle
background	String	-	#ffffff	Background color of buttons
borderColor	String	-	#02C8F3	Border color of buttons
color	String	-	#02C8F3	Color of buttons
backgroundHover	String	-	#02C8F3	Background color of buttons when hovering
borderColorHover	String	-	#02C8F3	Border color of buttons when hovering
colorHover	String	-	#ffffff	Color of buttons when hovering
fontFamily	String	-	Avenir	Font family of buttons
currentPageButtonStyle
backgroundActive	String	-	#02C8F3	Background color of active button
borderColorActive	String	-	#02C8F3	Border color of active button
colorActive	String	-	#ffffff	Color of active button
Arrows settings:
hideArrows	Boolean	true, false	false	Show or hide the arrows of pagination.
arrowSwitchHide	Boolean	true, false	false	Switches the mode of the arrows from disabled to full hiding.
arrowStyle	String	styleArrow-1, styleArrow-2, styleArrow-3	styleArrow-2	Styles icons of arrow.
arrowStyleColor	String	-	#02C8F3	Color of arrow.
arrowStyleColorHover	String	-	#ffffff	Color of arrow when hovering.
Dots settings:
controlDotsStyle	String	styleDots-1, styleDots-2, styleDots-3	styleDots-1	Styles of dots.
controlDotsColor	String	-	#02C8F3	Color of dots.
pageStarted:	Number	-	1	Number of start page.
PaginationPageSettings:
Page settings:
pageClass	String	-	-	Common class for all pages.
Spinner settings:
spinner	Boolean	true, false	false	Show or hide loading spinner.
spinnerStyle	String	spinnerStyle-1, spinnerStyle-2, spinnerStyle-3	spinnerStyle-3	Styles for loading spinner.
spinnerColor	String	-	#ffffff	Color of loading spinner.
Animations settings:
animationPage	String	fade, slide, bounce, default	default	Animation when switching pages.

名称	类型	所有值	默认值	描述
PaginationControlSettings:
按钮设置：
controlClass	串	--	--	带有分页按钮的父块的通用类。
controlStyle	串	正方形，圆形，默认	默认	分页按钮的样式。
maxButtons	数	--	5	页面上的最大分页按钮数。
allpageButtonsStyle
背景	串	--	#ffffff	按钮的背景色
边框颜色	串	--	＃02C8F3	按钮的边框颜色
颜色	串	--	＃02C8F3	按钮颜色
backgroundHover	串	--	＃02C8F3	悬停时按钮的背景色
borderColorHover	串	--	＃02C8F3	悬停时按钮的边框颜色
colorHover	串	--	#ffffff	悬停时按钮的颜色
字体系列	串	--	阿维尼尔	按钮字体家族
currentPageButtonStyle
backgroundActive	串	--	＃02C8F3	活动按钮的背景色
borderColorActive	串	--	＃02C8F3	活动按钮的边框颜色
colorActive	串	--	#ffffff	活动按钮的颜色
箭头设置：
hideArrows	布尔型	真假	假	显示或隐藏分页箭头。
arrowSwitch隐藏	布尔型	真假	假	将箭头的模式从禁用切换为完全隐藏。
arrowStyle	串	styleArrow-1，styleArrow-2，styleArrow-3	styleArrow-2	样式箭头图标。
arrowStyleColor	串	--	＃02C8F3	箭头的颜色。
arrowStyleColorHover	串	--	#ffffff	悬停时箭头的颜色。
点设置：
controlDotsStyle	串	styleDots-1，styleDots-2，styleDots-3	styleDots-1	点的样式。
controlDotsColor	串	--	＃02C8F3	点的颜色。
pageStarted：	数	--	1个	起始页数。
PaginationPageSettings:
页面设置：
pageClass	串	--	--	所有页面的通用类。
微调器设置：
微调器	布尔型	真假	假	显示或隐藏加载微调器。
spinnerStyle	串	spinnerStyle-1，spinnerStyle-2，spinnerStyle-3	spinnerStyle-3	加载微调器的样式。
spinnerColor	串	--	#ffffff	加载微调器的颜色。
动画设置：
animationPage	串	淡入，滑动，弹跳，默认	默认	切换页面时的动画。

方法 (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设置分页