收起
展開
代碼：
useResizeObserverHooks.js
import { useEffect, useLayoutEffect } from "react";export const useResizeObserver = (containerDom, domClass, callback) => {useLayoutEffect(() => {let resizeObserver = null;let dom = null;if (typeof ResizeObserver !== "undefined") {// 選擇你想要觀察的元素const container = containerDom || document;dom = container.querySelector(domClass);// 創建一個 ResizeObserver 實例并傳入回調函數resizeObserver = new ResizeObserver(entries => {// 循環遍歷所有觀察到變化的元素for (const entry of entries) {const height = entry.target.offsetHeight;callback(height);}});// 開始觀察元素if (dom) {resizeObserver?.observe(dom);}} else {console.log("ResizeObserver is not supported in this browser.");}return () => {if (dom) {resizeObserver.unobserve(dom);resizeObserver?.disconnect(dom);}};}, [containerDom, domClass, callback]);
};import React, { useState } from "react";
import { Button, ConfigProvider, Space, Form, Flex } from "antd";
import styles from "./Index.module.less";
import { useResizeObserver } from "./useResizeObserverHooks";const classnames = (...args) => {return args.filter(Boolean).join(" ");
};const SearchForm = props => {const {defaultHeight = 58,children,onResetHandle,buttomSolt,submitText = "查詢",resetText = "重置",...FromProps} = props;// const [form] = Form.useForm();// console.log(buttomSolt, "buttomSolt");const [showMore, setShowMore] = useState(false);const containerRef = useRef(null);useResizeObserver(containerRef.current,".ant-form", h => {setShowMore(h > defaultHeight);});const onReset = () => {// form.resetFields();onResetHandle && onResetHandle();};const [isOpen, setIsOpen] = useState(false);return (<divref={containerRef}style={{ height: `${isOpen ? "auto" : `${defaultHeight}px`}` }}className={classnames(styles.searchForm,!isOpen ? styles.overflowhidden : "",)}><ConfigProvidertheme={{token: {borderRadius: 4,},}}><Form {...FromProps}><div className={styles.formItemBox}>{children}</div><divclassName={styles.ButtonBox}style={{paddingBottom: `${isOpen ? "" : "4px"}`,height: `${isOpen ? "auto" : `${defaultHeight}px`}`,}}><Form.Item>{buttomSolt ? (buttomSolt) : (<><Button htmlType="button" onClick={onReset}>{resetText}</Button><Button type="primary" htmlType="submit">{submitText}</Button></>)}</Form.Item></div></Form></ConfigProvider>{/* 展開 收起 */}{isOpen ? <div className={styles.zhanweibefore}></div> : null}{showMore ? (<divclassName={isOpen ? styles.before : styles.topBefore}onClick={() => {setIsOpen(e => !e);}}><div></div></div>) : null}</div>);
};export default SearchForm;樣式
.overflowhidden {overflow: hidden;
}
.searchForm {color: #666666;position: relative;.formItemBox {display: flex;align-items: flex-start;justify-content: flex-start;flex-wrap: wrap;flex: 1;}.topBefore {position: absolute;bottom: 0;background: #fff;border-bottom: 1px solid #dce6ec;width: 100%;display: flex;justify-content: center;cursor: pointer;> div {width: 74px;height: 4px;background: #b3d9ff;position: relative;cursor: pointer;&::before {content: "";width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 10px solid #b3d9ff;position: absolute;top: -2px;left: 50%;transform: translate(-50%, -50%);}}}.zhanweibefore {width: 100%;height: 14px;}.before {position: absolute;bottom: 0;background: #fff;width: 100%;height: 14px;display: flex;justify-content: center;border-top: 1px solid #dce6ec;> div {width: 74px;height: 4px;background: #b3d9ff;position: relative;cursor: pointer;&::before {content: "";width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 10px solid #b3d9ff;position: absolute;top: 7px;left: 50%;transform: translate(-50%, -50%);}}}.ButtonBox {width: 200px;height: 100%;display: flex;align-items: flex-end;justify-content: flex-end;:global {.ant-btn {padding: 4px 10px;margin-right: 10px;}// 重置插槽內樣式.ant-form-item-control-input-content {align-items: flex-end;justify-content: flex-end;}}}:global {.ant-form {// padding-right: 200px;position: relative;}.ant-form-item {display: flex;align-items: center;width: 290px;margin: 0;padding: 10px 15px 10px 0;}.ant-row {flex: 1;.ant-form-item-label {width: 90px;}.ant-form-item-control {flex: 1;}.ant-form-item-control-input-content {display: flex;.flex1 {flex: 1;}.flex2 {flex: 2;}}}.ant-space-compact {flex: 1;align-items: center;}.ant-picker,.ant-input-number {width: 100%;}.span2 {width: 580px;}.ant-slider {width: 100%;}}
}使用
查看Antd Form api
className="span2"className="flex2"className="flex1"
import React, { useState, useEffect } from "react";
import styles from "./index.module.less";
import SearchForm from "@/components/SearchForm";
import HocAntdTable from "@/components/HocAntdTable";import {Form,Space,Tag,Button,Cascader,Checkbox,ColorPicker,DatePicker,Input,InputNumber,Radio,Select,Slider,Switch,TreeSelect,Upload,
} from "antd";const { RangePicker } = DatePicker;
const { TextArea } = Input;const mockDataSource = Array.from({ length: 20 }, (_, index) => ({key: (index + 1).toString(),firstName: ["John", "Jim", "Joe"][index % 3],lastName: ["Brown", "Green", "Black"][index % 3],age: [32, 42, 32][index % 3],address: ["New York No. 1 Lake Park","London No. 1 Lake Park","Sydney No. 1 Lake Park",][index % 3],tags: [["nice", "developer"], ["loser"], ["cool", "teacher"]][index % 3],
}));
const dataSource = [...mockDataSource,{key: "1",firstName: "John",lastName: "Brown",age: 32,address: "New York No. 1 Lake Park",tags: ["nice", "developer"],},{key: "2",firstName: "Jim",lastName: "Green",age: 42,address: "London No. 1 Lake Park",tags: ["loser"],},{key: "3",firstName: "Joe",lastName: "Black",age: 32,address: "Sydney No. 1 Lake Park",tags: ["cool", "teacher"],},{key: "11",firstName: "John",lastName: "Brown",age: 32,address: "New York No. 1 Lake Park",tags: ["nice", "developer"],},{key: "22",firstName: "Jim",lastName: "Green",age: 42,address: "London No. 1 Lake Park",tags: ["loser"],},{key: "33",firstName: "Joe",lastName: "Black",age: 32,address: "Sydney No. 1 Lake Park",tags: ["cool", "teacher"],},
];const columns = [{title: "姓名",dataIndex: "name",key: "name",},{title: "年齡",dataIndex: "age",key: "age",},{title: "住址",dataIndex: "address",key: "address",},
];const FormTableDemoPage = props => {const [form] = Form.useForm();const aa = () => {form.resetFields();};return (<>{/* 表單搜索 對照antd Api通用 */}<SearchFormlabelAlign="left"layout="inline"onFinish={values => {console.log(values);}}form={form}onFieldsChange={(changedFields, allFields) => {console.log(changedFields, allFields);}}onResetHandle={() => {// 重置事件form.resetFields();}}// buttomSolt = {// <div>// <Button>重置</Button>// <Button>定義</Button>// </div>// }><Form.ItemclassName="span1"label="Checkbox"name="disabled"valuePropName="checked"><Checkbox>Checkbox</Checkbox></Form.Item><Form.Item label="Address"><Space.Compact><Form.Itemname={["address", "province"]}noStylerules={[{required: true,message: "Province is required",},]}><Select placeholder="Select province"><Option value="Zhejiang">Zhejiang</Option><Option value="Jiangsu">Jiangsu</Option></Select></Form.Item><Form.Itemname={["address", "street"]}noStylerules={[{required: true,message: "Street is required",},]}><Inputstyle={{width: "50%",}}placeholder="Input street"/></Form.Item></Space.Compact></Form.Item><Form.Item label={null} name="ssss"><Select className="flex1"><Select.Option value="demo">Demo</Select.Option><Select.Option value="222">Demo</Select.Option></Select><Select className="flex2" name="demo"><Select.Option value="demo">Demo</Select.Option><Select.Option value="222">Demo</Select.Option></Select></Form.Item><Form.Item label="Radio" name="Radio"><Radio.Group><Radio value="apple"> Apple </Radio><Radio value="pear"> Pear </Radio></Radio.Group></Form.Item><Form.Item label="Input" name="Input"><Input /></Form.Item><Form.Item label="Select" name="Select"><Select><Select.Option value="demo">Demo</Select.Option></Select></Form.Item><Form.Item label="TreeSelect" name="TreeSelect"><TreeSelecttreeData={[{title: "Light",value: "light",children: [{title: "Bamboo",value: "bamboo",},],},]}/></Form.Item><Form.Item label="Cascader" name="Cascader"><Cascaderoptions={[{value: "zhejiang",label: "Zhejiang",children: [{value: "hangzhou",label: "Hangzhou",},],},]}/></Form.Item><Form.Item label="DatePicker" name="DatePicker"><DatePicker /></Form.Item><Form.Item label="RangePicker" className="span2" name="RangePicker"><RangePicker /></Form.Item><Form.Item label="InputNumber"><InputNumber /></Form.Item><Form.Item label="Switch" valuePropName="checked" name="Switch"><Switch /></Form.Item><Form.Item label="Button"><Button>Button</Button></Form.Item><Form.Item label="Slider"><Slider /></Form.Item><Form.Item label="ColorPicker"><ColorPicker /></Form.Item></SearchForm>{/* 表格查看 對照antd Api通用<HocAntdTable dataSource={dataSource} columns={columns} />*/}</>);
};export default FormTableDemoPage;
)
