ResizeObserver

ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

简单来说, 我们可以用这个函数来监听搜索组件的边框变化.

方法

ResizeObserver.disconnect()

取消特定观察者目标上所有对 Element 的监听。
ResizeObserver.observe()

开始对指定 Element 的监听。

ResizeObserver.unobserve()

结束对指定 Element 的监听。

废话不多说,直接上代码

index.js

// 搜索框一行展示多少个
const [searchFormItemColum, setSearchFormItemColum] = useState(searchFormCol || 4);

useEffect(() => {
const resizeObserver = new ResizeObserver(() => {
    // 获取当前元素的clientWidth
    const { clientWidth } = searchRef?.current || {};
        // 对一行的元素进行遍历
      for (let i = searchFormItemColum; i > 0; i--) {
      // 获取单个FormItem的宽度
        const item = clientWidth / i;
        // 单个FormItem的宽度>300,返回,否则进入下一个循环
        if (item >= 300) {
          setSearchFormItemColum(i);
          break;
        }
        if (i === 1) {
          setSearchFormItemColum(1);
        }
      }
    });
        // 开始监听
    resizeObserver.observe(searchRef.current);
    () => {
    // 组件销毁结束监听
      resizeObserver.disconnect();
    };
}, []);

// 获取搜索组件的ref,然后对搜索组件进行监听
<div ref={searchRef}>
  <SearchForm 
  search={search} 
  searchFormItemColum={searchFormItemColum}
  onSearch={onSearch}
   />
</div>

SearchForm.js

// 渲染Form
const renderForm = useMemo(() => {
    let searchFormItem = isCollapsed ? search?.slice(0, searchFormItemColum - 1 || 1) : search;
    return searchFormItem?.map((formItem: FormItem) => {
      const { label, name, render, formItemProps, colProps } = formItem;
      return (
      // 24 / searchFormItemColum -->就能实现搜索动态控制宽度
        <Col key={name} span={24 / searchFormItemColum} style={{ padding: '0 12px' }} {...colProps}>
          <Form.Item key={formItem.name} label={label} name={name} {...formItemProps}>
            {render ? render() : <Input></Input>}
          </Form.Item>
        </Col>
      );
    });
  }, [search, isCollapsed]);

下面就是浏览器在不同宽度下搜索组件的实现

这种方式不仅可以react实现,vue也可以使用.

以上就是我对搜索组件自动根据浏览器尺寸变化实现自动换行的方式,如果你有更好的实现方式,欢迎在评论区讨论.

搜索组件怎么根据浏览器窗口自动换行(react)

ResizeObserver

方法