pagination

分页

1.1. nly-pagination

分页

1.1.1. props

1.1.2. props

参数 类型 默认值 描述
total Number, String 1 总数据条数,不传默认为1
size Number, String 10 每页数量,默认10
currentPage Number, String 1 当前页码,默认为1
limit Number, String 5 显示元素,默认显示5个页码,最低5个
align String left 位置,可选left,center,right
firstFunction func 点击第一页按钮触发函数。默认只跳转到第一页
prevFunction func 点击上一页按钮触发函数。默认只跳转到上一页
currentFunction func 点击具体页码按钮触发函数。
nextFunction func 点击下一页按钮触发函数。默认只跳转到下一页
lastFunction func 点击第最后一页按钮触发函数。默认只跳转到最后一页
sizeFunction func 修改size触发函数
show-pg Boolean false 只有一个页时是否显示分页。默认显示。设置为true,则只有一页的时候不显示分页。
sm Boolean false 小分页
lg func false 大分页

组件参数

<nly-pagination>

props 参数

props (Click to sort Ascending)类型默认值描述
total
Number or String
size
Number or String10大小,可选xs,sm,md,lg,xl
current-page
Number or String1
limit
Number or String5
align
String'left'nav元素(切换按钮)文字对齐方式, 可选 'start' ('left'), 'center', 'end' ('right')
first-function
Function
prev-function
Function
current-function
Function
next-function
Function
last-function
Function
size-function
Function
show-pg
Booleanfalse
sm
Booleanfalse在SM及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
lg
Booleanfalse在LG及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto

Slots

Slot NameDescription
tabs-start 在有内容的选项卡前面添加没有内容的选项卡
tabs-end 在有内容的选项卡最后面添加没有内容的选项卡
empty 当没有tab时渲染

Events

EventArgumentsDescription
input
  1. tabIndex - 当前可见tab的index
更新v-model值时触发
activate-tab v0.4.4+
  1. newTabIndex - tab激活之后的index
  2. prevTabIndex - 当前激活的tab的index,如果没有激活,那么默认为-1
  3. nlyEvt - NlyEvent对象. 防止冒泡
准备激活tab之前的index
changed
  1. currentTabs - 当前tabs中tab集合
  2. previousTabs - 未更新之前的tabs的tab集合
当一个tab被移除或者重新排序,或者新增一个tab时触发

<nly-tab>

props 参数

props (Click to sort Ascending)类型默认值描述
id
Stringnull设置id
active
Booleanfalse设置 true 处于激活状态
tag
String'div'标签
button-id
String如果传入, 则可设置一个按钮来操作对应id的nly-tab可见状态,如果没用传入,会自动生成一个
title
String''标题文字
title-item-class
String or Array or Object选项卡控制器 li标签的 自定义css
title-link-class
String or Array or Object选项卡控制器里包裹的a标签自定义css
title-link-attributes
v0.4.4+
Object选项卡控制器里包裹的a标签 attributes属性
disabled
Booleanfalse禁用,设置true为禁用状态
no-body
Booleanfalse
lazy
Booleanfalse懒加载

Slots

Slot NameDescription
title tab标题插槽

Events

EventArgumentsDescription
click
  1. evt - 原生事件
点击tab时触发

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-pagination>NlyPaginationnly-adminlte-vue
<nly-tab>NlyTabnly-adminlte-vue

例子

import { NlyPagination } from 'nly-adminlte-vue'
Vue.component('nly-pagination', NlyPagination)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
PaginationPluginnly-adminlte-vue

例子

import { PaginationPlugin } from 'nly-adminlte-vue'
Vue.use(PaginationPlugin)