This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

TIP 👉 drill a thousand songs and then xiao sound, watch a thousand swords and then knowledge. — Liu Xie, “Wenxin Diao Long · Bosom Friend”

preface

Web Component is an area that the front-end world has been very enthusiastic about. To implement it with third-party componentized frameworks, you need to rely on a lot of things in the framework itself. Most of the time we just have a few simple components, not too big, not too many, so in order to keep the components lightweight, Simple, we don’t really want to use a third party framework at this point.

Pagination paging

import

import Radio from '@/components/Pagination/Pagination';
Copy the code

Props

1. defaultCurrent
  • Type: number
  • Default value: 1
  • Description: Default current page number
2. total
  • Type: number
  • Default value: 0
  • Description: Total number of data
3. defaultPageSize
  • Type: number
  • Default value: 10
  • Description: Initial number of items per page
4. pageSizeOptions
  • Type: Array
  • Default: [’10’, ’20’, ’30’, ’40’, ’50’]
  • Description: Array of options per page
5. showSizeChanger
  • Types: bool
  • Default value: false
  • Description: Whether pageSize can be changed
6. showQuickJumper
  • Types: bool
  • Default value: false
  • Note: Whether to jump to a page quickly
7. hideOnSinglePage
  • Types: bool
  • Default value: true
  • Description: If only one page is hidden
8. simple
  • Types: bool
  • Default value: false
  • Description: Whether to show simple paging
9. disabled
  • Types: bool
  • Default value: false
  • Description: Whether it is unavailable
10. onChange
  • Type: func (required)
  • Default value: none
  • Description: callback function when page number changes, input parameter:
    • {number} pageNo page number
    • {number} pageSize Number of entries per page
11. onShowSizeChange
  • Type: func
  • Default value :() => {}
  • Description: Callback function when the number of items per page changes, input parameter:
    • {number} pageNo page number
    • {number} pageSize Number of entries per page
12. showTotal
  • Type: func | bool
  • Default value: false
  • Description: Displays total data. When the value is a function, the input parameter is:
    • {number} total Total number of data
    • The {Array} range Array contains two numbers, the start and end numbers of the current page
13. className
  • Type: string | array | object (key: style name, value: bool)
  • Default value: none
  • Description: Outermost element style
<Pagination className = {'my-class'}></Pagination>
<Pagination className = {['my-class1', 'my-class2']}></Pagination>
<Pagination className = {{'my-class1': true}}></Pagination>
Copy the code

Let’s write code to implement a Page component

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 {
    // Check the input type
    static propTypes = {
        // Default current page number
        defaultCurrent: PropTypes.number,
        // Total number of data
        total: PropTypes.number,
        // The initial number of columns per page
        defaultPageSize: PropTypes.number,
        // Array of options per page, default: ['10', '20', '30', '40', '50']
        pageSizeOptions: PropTypes.arrayOf(PropTypes.string),
        // Whether pageSize can be changed
        showSizeChanger: PropTypes.bool,
        // Whether to jump to a page quickly
        showQuickJumper: PropTypes.oneOfType([
            PropTypes.bool,
            PropTypes.shape({ goButton: PropTypes.element })
         ]),
        // Whether to hide when there is only one page
        hideOnSinglePage: PropTypes.bool,
        // Whether to show simple pagination
        simple: PropTypes.bool,
        // Is not available
        disabled: PropTypes.bool,
        /** * callback function when page number changes *@param {number} PageNo page *@param {number} PageSize Number of entries per page */
        onChange: PropTypes.func.isRequired,
        /** * callback function when the number of items per page changes *@param {number} PageNo page *@param {number} PageSize Number of entries per page */
        onShowSizeChange: PropTypes.func,
        /** * Display total data *@param {number} Total Total number of data *@param {[number]} The range array contains two numbers, the start and end of the current page */
        showTotal: PropTypes.oneOfType([
            PropTypes.func,
            PropTypes.bool
        ]),
        // Outermost element style
        className: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.array,
            PropTypes.objectOf(PropTypes.bool)
        ])
    }

    // Enter the default value
    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;

Copy the code

I’m going to leave the styles out for now

“Feel free to discuss in the comments section.”

Hope to finish watching friends can give a thumbs-up, encourage once