UI框架为ant design第一步：创建components组件封装文件夹1》components--ui文件夹下index.js的代码：import FormSearch from './form'export {FormSearch, CascaderMul}2》components--ui--form文件夹下index.js的代码：import {Form, Row, Col, Button, Space} from 'antd'import {DownOutlined} from '@ant-design/icons'import React, {useState, useEffect} from 'react'import useMediaQuery from 'use-media-antd-query'/*** 默认的查询表单配置*/const defaultColConfig = {xs: 3,sm: 3,md: 3,lg: 3,xl: 4,xxl: 6,}const getSpanConfig = (span, size) => {// if (typeof span === 'number') {// return span// }const config = {...defaultColConfig,...span,}return config[size]}//收起、展开的代码可以根据你们需求来const Collapse = ({collapse, onCollapse}) => {let text = '收起'if (!collapse) {text = '展开'}return (<aonClick={onCollapse}style={{display: 'flex', width: 100, alignItems: 'center'}}>{text}<DownOutlinedstyle={{marginLeft: '0.5em',transition: '0.3s all',transform: `rotate(${collapse ? 0 : 0.5}turn)`,}}/></a>)}const getOffset = (length, span = 4) => {const cols = 24 / spanreturn (span - 1 - (length % span)) * cols}/*** 查询表单* @param {Object} props 参数* @param {Object} props.initialValues 初始化值* @param {Function} props.onFinish 查询表单提交回调* @param {Function} props.onReset 重置表单* @param {Array} props.children 子组件* @param {Object} props.formRef 表单引用* @param {Boolean} props.collapsed 默认是否收起* @param {Number} props.span 列数* @returns*/function body({initialValues,onFinish,onReset = () => {},collapsed = false,span = 6,children,formRef,}) {const [collapse, setCollapse] = useState(collapsed)const [form] = formRef ? [formRef] : Form.useForm()const windowSize = useMediaQuery()const [colSize, setColSize] = useState(span)const rowNumber = 24 / colSize || 3const onCollapse = () => {setCollapse(!collapse)}useEffect(() => {let defSpane = getSpanConfig(span, windowSize)setColSize(defSpane > span ? span : defSpane)}, [windowSize])const childrens = Array.isArray(children) ? children : [children]const item = childrens.filter((_, index) =>!collapse ? index < (colSize - 1 || 1) : true,)return (<divstyle={{background: '#ffffff',borderRadius: 4,}}><Formform={form}onFinish={onFinish}layout="vertical"className="searchForm"initialValues={initialValues}><Row gutter={16} justify="start">{item.map((child, index) => (<Col key={index} span={rowNumber}>{React.cloneElement(child)}</Col>))}<Colspan={rowNumber}offset={getOffset(item.length, colSize)}align="end"style={{textAlign: childrens.length + 1 > colSize ? 'left' : 'right',}}><Form.Item label={' '}><Space size="middle"><Space><ButtononClick={() => {form.resetFields()onReset()}}>重置</Button><Button type="primary" htmlType="submit">查询</Button></Space>{childrens.length + 1 > colSize && (<Collapse collapse={collapse} onCollapse={onCollapse} />)}</Space></Form.Item></Col></Row></Form></div>)}export default body3》页面引入：import {FormSearch} from '~/components/ui'<FormSearch><Form.Item label="前缀类型" name="接口参数"><Input placeholder="提示信息" allowClear /></Form.Item></FormSearch>
如果觉得《react--（查询 重置）按钮封装》对你有帮助，请点赞、收藏，并留下你的观点哦！
