bm-custom-pagination

用于本末项目内纵向分页, 依赖element-ui pagination组件, 点击分页中的数字屏幕直接滚动至数组中该index的数据元素位置

安装

npm install bm-custom-pagination -s

import Vue from 'vue'
import bmCustomPagination from 'bm-custom-pagination'
import 'bm-custom-pagination/bmCustomPagination.less'
Vue.use(bmCustomPagination)

<template>
    <div>
        <custom-pagination :list="data"
                           :isReverse="isReverse"
                           :idName="idName"></custom-pagination>            
    </div>
</template>

<script>
export default {
    data () {
        return {
            data: [],
            isReverse: false,
            idName: 'id',
            scrollBoxId: 'scrollBox'
        }
    }
}
</script>

参数注解

data: 直接传表格元数据即可, 组件自动对数据进行遍历, data的长度少于2此组件不会渲染

isReverse: 是否反转表格数据, 相当于点击1, 屏幕滚动至第10位数据这种, 默认false

idName: 用于区分列表数据元素的唯一标识, 如果卡片式列表的id是当前数组中的某个位置的key, 那么需要将该属性名称列为此参数, 通常是'id'

scrollBoxId: 点击分页时，需要被滚动的元素id, 默认为'scrollBox'

注意

父级元素需要有height: 100%;position: relative;两个css属性, 否则可能会出现样式bug, 分页元素基于父级的高度垂直居中