这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

TIP 👉 操千曲而后晓声，观千剑而后识器。——刘勰《文心雕龙·知音》

前言

Web Component是前端界一直非常热衷的一个领域，用第三方组件化的框架去实现的话，你需要依赖框架本身很多东西，很多时候我们只是简单的几个组件，不是很大，也不是很多，所以为了保证组件的`轻量，简单`,其实这个时候我们并不想采用第三方的框架。

Pagination 分页

import

import Radio from '@/components/Pagination/Pagination';

Props

1. defaultCurrent

• 类型：number
• 默认值：1
• 说明：默认的当前页数

2. total

• 类型：number
• 默认值：0
• 说明：数据总数

3. defaultPageSize

• 类型：number
• 默认值：10
• 说明：初始的每页条数

4. pageSizeOptions

• 类型：Array
• 默认值：['10', '20', '30', '40', '50']
• 说明：每页条数选项数组

5. showSizeChanger

• 类型：bool
• 默认值：false
• 说明：是否可以改变 pageSize

6. showQuickJumper

• 类型：bool
• 默认值：false
• 说明：是否可以快速跳转至某页

7. hideOnSinglePage

• 类型：bool
• 默认值：true
• 说明：是否只有一页时隐藏

8. simple

• 类型：bool
• 默认值：false
• 说明：是否展示简单的分页

9. disabled

• 类型：bool
• 默认值：false
• 说明：是否不可用

10. onChange

• 类型：func (必填)
• 默认值：无
• 说明：页码改变时的回调函数，入参：
  • {number} pageNo 页码
  • {number} pageSize 每页条数

11. onShowSizeChange

• 类型：func
• 默认值：() => {}
• 说明：每页条数改变时的回调函数，入参：
  • {number} pageNo 页码
  • {number} pageSize 每页条数

12. showTotal

• 类型：func | bool
• 默认值：false
• 说明：显示数据总数。当值为函数时，入参：
  • {number} total 数据总数
  • {Array} range 数组中有两个数字，分别是当前页的开始条数和结束条数

13. className

• 类型：string | array | object(key: 样式名，value: bool)
• 默认值：无
• 说明：最外层元素样式

<Pagination className = {'my-class'}></Pagination>
<Pagination className = {['my-class1', 'my-class2']}></Pagination>
<Pagination className = {{'my-class1': true}}></Pagination>

让我们写代码来实现一款page组件

import React from 'react';
import PropTypes from 'prop-types';
import RcPagination from 'rc-pagination';
import './Pagination.scss';

/**
 * Pagination 分页
 * @see https://github.com/react-component/pagination
 */
class Pagination extends React.Component {
    // 入参类型检查
    static propTypes = {
        // 默认的当前页数
        defaultCurrent: PropTypes.number,
        // 数据总数
        total: PropTypes.number,
        // 初始的每页条数
        defaultPageSize: PropTypes.number,
        // 每页条数选项数组，默认值：['10', '20', '30', '40', '50']
        pageSizeOptions: PropTypes.arrayOf(PropTypes.string),
        // 是否可以改变 pageSize
        showSizeChanger: PropTypes.bool,
        // 是否可以快速跳转至某页
        showQuickJumper: PropTypes.oneOfType([
            PropTypes.bool,
            PropTypes.shape({ goButton: PropTypes.element })
         ]),
        // 是否只有一页时隐藏
        hideOnSinglePage: PropTypes.bool,
        // 是否展示简单的分页
        simple: PropTypes.bool,
        // 是否不可用
        disabled: PropTypes.bool,
        /**
         * 页码改变时的回调函数
         * @param {number} pageNo 页码
         * @param {number} pageSize 每页条数
         */
        onChange: PropTypes.func.isRequired,
        /**
         * 每页条数改变时的回调函数
         * @param {number} pageNo 页码
         * @param {number} pageSize 每页条数
         */
        onShowSizeChange: PropTypes.func,
        /**
         * 显示数据总数
         * @param {number} total 数据总数
         * @param {[number]} range 数组中有两个数字，分别是当前页的开始条数和结束条数
         */
        showTotal: PropTypes.oneOfType([
            PropTypes.func,
            PropTypes.bool
        ]),
        // 最外层元素样式
        className: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.array,
            PropTypes.objectOf(PropTypes.bool)
        ])
    }

    // 入参默认值
    static defaultProps = {
        defaultCurrent: 1,
        total: 0,
        defaultPageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showSizeChanger: false,
        showQuickJumper: false,
        hideOnSinglePage: true,
        simple: false,
        onChange: () => {},
        onShowSizeChange: () => {},
        showTotal: false,
        disabled: false,
    };

    constructor(props) {
        super(props);
    }

    render() {
        const {
            showTotal,
            ...restProps
        } = this.props;
        return (
            <div>
            <RcPagination
                {...restProps}
                showTotal={ typeof showTotal === 'boolean' ? ( showTotal ? (total, range) => `共${total}条` : null ): showTotal }
                prefixCls="pagination"/>
            </div>
        );
    }
}


export default Pagination;

样式这块就先不放了

「欢迎在评论区讨论」

希望看完的朋友可以给个赞，鼓励一下