@hadss/web_adaptive_layout_ui

介绍

H5框架的多设备适配高阶组件库核心代码。

目录结构

├─@hadss/web_adaptive_layout_ui // 项目名称
│  ├─src
│  │  ├─components // 组件库源码
│  │  │  └─{component-name}
│  │  │     ├─default // 组件默认属性
│  │  │     ├─index.ts // 父标签源码
│  │  │     └─item.ts // 子标签源码
│  │  ├─hooks // 公共方法
│  │  │  └─{method-name}
│  │  ├─types // 类型定义文件
│  │  │  └─{component/method name}
│  │  └─index.ts // 组件库入口文件
│  ├─LICENSE
│  ├─vite.config.ts // 打包配置文件
│  ├─tsconfig.json // typeScript配置文件

新增特性

1. 新增纵向断点能力，相关接口useVerticalBreakpointValue和getCurrentVerticalBreakpoint。
2. subscribeToBreakpoint接口新增对纵向断点的监听。

断点能力

API

使用说明

1. import断点管理类

  import { BreakpointManager } from '@hadss/web_adaptive_layout_ui';

2. 实例化断点管理类

  const breakpointManager = new BreakpointManager({});

可传入参数customBreakpoints，自定义断点类型和区间：

  {
    xs: 0,
    sm: 320,
    md: 600,
    lg: 840,
    xl: 1440,
  }

3. 注册断点回调，在回调中实时获取当前断点下的属性值和断点值

  const unsubscribe = breakpointManager.subscribeToBreakpoint((bp,vbp) => {
    //bp为横向断点回调，vbp为纵向断点回调，均可设置为null来只使用一种断点  
    direction = breakpointManager.useBreakpointValue({
      xs: 'vertical',
      sm: 'vertical',
      md: 'horizontal',
      lg: 'horizontal',
      xl: 'horizontal',
    });
    breakpointManager.getCurrentBreakpoint();
    breakpointManager.getCurrentVerticalBreakpoint();
  })

如果只定义了中间连续区域的属性值，两侧的断点区间会根据最近的值进行补齐，故上面的代码可做一定的简化：

  const unsubscribe = breakpointManager.subscribeToBreakpoint((bp,vbp) => {
    direction = breakpointManager.useBreakpointValue({
      sm: 'vertical',
      md: 'horizontal',
    });
    breakpointManager.getCurrentBreakpoint();
    breakpointManager.getCurrentVerticalBreakpoint();
  })

4. 获取当前的内置的断点类型和区间

  breakpointManager.getBreakpoints();

5. 页面销毁前取消断点订阅并销毁实例

  unsubscribe();
  breakpointManager.destroy();

类挪移布局组件MultiDiversion

API

父标签

子标签

页签栏组件MultiTabBar

API

父标签

页签栏标签

子标签

EVENT

网格组件MultiGrid

API

父标签

子标签

EVENT