@hadss/web_adaptive_layout_ui v1.0.0-rc.4

web_adaptive_layout_ui

介绍

H5框架的多设备适配高阶组件库核心代码。提供高价组件的底层处理逻辑及对应标签，供不同框架调用。提供的高价组件范围参见各不同框架的介绍。

目录结构

├─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配置文件

断点能力

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

父标签TabBarContainer

页签栏标签TabBar

子标签TabBarItem

EVENT

网格组件MultiGrid

API

父标签

子标签

EVENT

组件显隐能力

API

显隐能力管理类DisplayPriorityLayout

实例化时需传入HTML元素 | 属性 | 说明 | 参数 | 返回值 | |----|---|---|---| | initializeLayout | 初始化显隐能力 | - | - | | destroy | 销毁事件监听 | - | - |

HTML自定义属性

显隐能力函数

使用说明

1. 导入显隐能力函数和显隐能力管理类

import { initializeDisplayPriorityLayout, DisplayPriorityLayout } from '@hadss/web_adaptive_layout_ui';

2. 在需要使用的HTML元素上增加data-priority-status自定义属性并设置为true，不使用则设置为false。子元素增加data-display-priority优先级属性。

<div ref="containerRef" data-priority-status="true">
  <div class="item" data-display-priority="5.0">Item 1</div>
  <div class="item" data-display-priority="2">Item 2</div>
  <div class="item" data-display-priority="3">Item 3</div>
  <div class="item" data-display-priority="1">Item 4</div>
  <div class="item" data-display-priority="2.0">Item 5</div>
</div>

3. 提供两种添加显隐能力的方式，需要在组件实例挂载完成后使用，组件实例卸载时需要销毁事件监听。

方式一: 调用显隐能力函数，批量添加显隐能力

 // 以vue框架为例，需要在onMounted中执行
 let layouts: DisplayPriorityLayout[] = [];
 onMounted(() => {
   layouts = initializeDisplayPriorityLayout();
 });

 // 组件实例卸载时销毁事件监听
 onUnmounted(() => {
   layouts.forEach((layout: DisplayPriorityLayout) => {
     layout.destroy();
   });
 });

方式二: 引入显隐能力管理类，为特定元素添加显隐能力

 // 以vue框架为例，需要在onMounted中执行
 let displayPriorityLayout: DisplayPriorityLayout | null = null;
 const containerRef = ref<HTMLElement>(null);
 onMounted(() => {
   displayPriorityLayout = new DisplayPriorityLayout(containerRef.value);
   displayPriorityLayout.initializeLayout();
 });

 // 组件实例卸载时销毁事件监听
 onUnmounted(() => {
   displayPriorityLayout?.destroy();
 });

使用限制

1. 仅支持非表单、表格的块级元素和内联块级元素
2. 容器里面的子元素不能设置绝对定位、固定定位和浮动等会导致子元素脱离文档流的样式
3. 仅支持单行样式，如一行或一列，不支持grid布局

栅格组件

API

父组件MultiGridRow | 属性 | 说明 | 类型 | 可选值 | 默认值 | |----|---|---|---|---| | columns | 设置设置布局列数。1.取值为大于0的整数 2.object类型参数支持{xs: 8, sm: 12, md: 12, lg: 12, xl: 16}类型的参数 | Number / Object | - | 12 | | gutter | 栅格布局间距。 1. String/Number类型的值即为横纵布局间距 2. object类型参数支持{x: 12, y: {xs: 5, sm: 8, md: 10}}类型的参数 | String / Number / Object | - | 0 | | breakpoints | 设置断点值的断点数列以及基于窗口或容器尺寸的相应参照。 | Object | breakpointRefrence值可选“componentSize”、“windowSize”。分别代表参照组件宽度及参照窗口宽度。 | { breakpointValue: { xs: 0, sm: 320, md: 600, lg: 840 }, breakpointRefrence: "windowSize", } | | direction | 栅格布局排列方向 | String | row / row-reverse | row |

子组件MultiGridCol | 属性 | 说明 | 类型 | 可选值 | 默认值 | |----|---|---|---|---| | span | 栅格子组件占用栅格容器组件的列数。span为0表示该元素不参与布局计算，即不会被渲染。1.取值为大于0的整数 2.object类型参数支持{xs: 8, sm: 12, md: 12, lg: 12, xl: 16}类型的参数 | Number / Object | - | 1 | | offset | 栅格子组件相对于原本位置偏移的列数。1.取值为大于0的整数 2.object类型参数支持{xs: 8, sm: 12, md: 12, lg: 12, xl: 16}类型的参数 | Number / Object | - | 0 | | order | 元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序。1.取值为大于0的整数 2.object类型参数支持{xs: 8, sm: 12, md: 12, lg: 12, xl: 16}类型的参数当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从小到大排列。 | Number / Object | - | 0 | | label | 设置网格项的文本内容(不支持断点) | String | - | - | | icon | 设置网格项的图标链接(不支持断点，只支持网络链接) | String | - | - |

EVENT

侧边栏组件

API

MultiSideBar | 属性 | 说明 | 类型 | 是否必填 | 默认值 | |----|---|---|---|---| | sideBarContainerType | 设置侧边栏的显示类型 | SideBarContainerType | 否 | Embed | | showSideBar | 设置是否显示侧边栏 | Boolean | 否 | true | | controlButton | 设置侧边栏控制按钮的属性 | ButtonStyle | 否 | - | | showControlButton | 设置是否显示控制按钮 | Boolean | 否 | true | | sideBarWidth | 设置侧边栏的宽度。设置为小于0的值时按默认值显示。受最小宽度和最大宽度限制，不在限制区域内取最近的点 | String / Number | 否 | 240, 单位：px | | minSideBarWidth | 设置侧边栏最小宽度。设置为小于0的值时按默认值显示。值不能超过侧边栏容器本身宽度，超过使用侧边栏容器本身宽度 | String / Number | 否 | 240, 单位：px | | maxSideBarWidth | 设置侧边栏最大宽度。设置为小于0的值时按默认值显示。值不能超过侧边栏容器本身宽度，超过使用侧边栏容器本身宽度 | String / Number | 否 | 280, 单位：px | | autoHide | 设置当侧边栏拖拽到小于最小宽度后，是否自动隐藏。受minSideBarWidth属性方法影响，minSideBarWidth属性方法未设置值使用默认值 | Boolean | 否 | true | | sideBarPosition | 设置侧边栏显示位置 | SideBarPosition | 否 | Start | | divider | 设置分割线的样式 | DividerStyle / null | 否 | - | | minContentWidth | 设置SideBarContainer组件内容区可显示的最小宽度 | String / Number | 否 | 360, 单位：px |

SideBarContainerType类型 | 名称 | 说明 | |----|---| | Embed | 侧边栏嵌入到组件内，和内容区并列显示。 组件尺寸小于minContentWidth + minSideBarWidth,并且未设置showSideBar时，侧边栏自动隐藏。 未设置minSideBarWidth或者minContentWidth采用未设置接口的默认值进行计算。 组件在自动隐藏后，如果通过点击控制按钮唤出侧边栏，则侧边栏悬浮在内容区上显示。 | | Overlay | 侧边栏浮在内容区上面 | | AUTO | 组件尺寸大于等于minSideBarWidth+minContentWidth时，采用Embed模式显示。 组件尺寸小于minSideBarWidth+minContentWidth时，采用Overlay模式显示。 未设置minSideBarWidth或minContentWidth时，会使用未设置接口的默认值进行计算，若计算的值小于600px，则使用600px做为模式切换的断点值。 |

ButtonStyle类型 | 名称 | 类型 | 必填 | 说明 | |----|---|---|---| | left | Number | 否 | 设置侧边栏控制按钮距离容器左界限的间距。 默认值：16, 单位：px | | top | Number | 否 | 设置侧边栏控制按钮距离容器上界限的间距。 默认值：48, 单位：px | | width | Number | 否 | 设置侧边栏控制按钮的宽度。 默认值：24, 单位：px | | height | Number | 否 | 设置侧边栏控制按钮的高度。 默认值：24, 单位：px | | icons | { shown: String; hidden: String } | 否 | 设置侧边栏控制按钮的图标 shown: 设置侧边栏显示时控制按钮的图标。 说明：资源获取错误时，使用默认图标。 hidden: 设置侧边栏隐藏时控制按钮的图标。 图标资源需要用require进行加载和传值 |

SideBarPosition类型 | 名称 | 说明 | |----|---| | Start | 侧边栏位于容器左侧 | | End | 侧边栏位于容器右侧 |

DividerStyle类型 | 名称 | 类型 | 必填 | 说明 | |----|---|---|---| | strokeWidth | String / Number | 否 | 分割线的线宽。 默认值：1, 单位：px | | color | String | 否 | 分割线的颜色。 默认值：#000000，3% | | startMargin | String / Number | 否 | 分割线与侧边栏顶端的距离。 默认值：0, 单位：px | | endMargin | String / Number | 否 | 分割线与侧边栏底端的距离。 默认值：0, 单位：px |

EVENT