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.
所有数据都存储在数组中,并且可以具有任何值。
![vue-smart-pagination](https://i-blog.csdnimg.cn/blog_migrate/fad3043af84aaafb481807fc840eb86b.gif)
安装 (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)
crt设置分页