@beisen/paging

paging

参数

props

const props = {
  hidden: false,    // 是否渲染 默认false
  total: 20,        // 总页数
  currentPage: 1,   // 当前页数
  visiblePages: 9,  // 显示的页数 min = 5
  capacity: 10,     // 每页条数，页面容量
  capacityList: [15, 30, 60, 100], //可选的页面容量
  isShowDropdown: true,
  autoDirection:false,  //DropDownButton的autoDirection属性
  direction:false,      //DropDownButton的direction属性
  hasJumpTo:false,      //是否显示跳转至
  onIndexChange: index => console.log(index),     // 页数变化
  onCapacityChange: index => console.log(index),  //页面容量变化
  focusCallBack: event => console.log(event),     // input 
  blurCallBack: event => console.log(event),      // input
  changeCallBack: event => console.log(event)     // input
}

PropTypes

Paging.propTypes = {
  hidden: PropTypes.bool,
  total: PropTypes.number.isRequired,
  currentPage: PropTypes.number.isRequired,
  visiblePages: PropTypes.number.isRequired,
  capacity: PropTypes.number.isRequired,
  capacityList: PropTypes.array.isRequired,
  onIndexChange: PropTypes.func.isRequired,
  onCapacityChange: PropTypes.func.isRequired
}

使用方法

1.安装npm组件包

npm install @beisen/paging --save-dev

2.引用组件

import Paging from "@beisen/paging"

3.传入参数

该参数为上述参数，传入方式使用: {...参数}

class Paging extends Component {
  render() {
      const options = {
        hidden: false, // 是否渲染 默认false
        total: 20, //总页数
        currentPage: 1, // 当前页数
        visiblePages: 9, // 显示的页数 min = 5
        capacity: 10, // 每页条数，页面容量
        capacityList:[15,30,60,100],//可选的页面容量
        onIndexChange: index => console.log(index), // 页数变化
        onCapacityChange: index => console.log(index)  //页面容量变化
      };
      return <Paging {...options} />
  }
}

React.render(<Paging />, document.getElementById('content'))