web-multidevice-advanced-ui

介绍

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

目录结构

|-web-multidevice-advanced-ui // 项目名称
    |-dist // 打包文件
    |-src
        |-components // 组件库源码
            |-{component-name}
                |-default // 组件默认属性
                |-index.ts // 父标签源码
                |-item.ts // 子标签源码
        |-hooks // 公共方法
            |-{method-name}
        |-types // 类型定义文件
            |-{component/method name}
        |-hookInput.ts // 公共方法入口文件
        |-index.ts // 组件库入口文件
    |-LICENSE
    |-rollup.config.js // 打包配置文件
    |-tsconfig.json // typeScript配置文件

断点能力

API

| 属性 | 说明 | 参数值 | 返回值 | 默认值 | |-----------------------|--------------------------|------------------------------------------|---------------|-----------------------------------| | customBreakpoints | 自定义断点类型和区间，实例化时传入 | Record<Breakpoint, number> | - | xs：0，sm：320，md：600，lg：840，xl：1440 | | subscribeToBreakpoint | 订阅断点变化，传入回调函数 | callback：(breakpoint：Breakpoint) => void | 取消订阅的函数 | - | | useBreakpointValue | 传入不同断点下的属性值，根据当前断点返回对应的值 | Record<Breakpoint, any> | 当前断点下的属性值 | - | | getCurrentBreakpoint | 获取当前的断点值 | - | 当前的断点值 | - | | getBreakpoints | 获取当前的内置的断点类型和区间 | - | 当前的内置的断点类型和区间 | - | | destroy | 销毁实例，移除监听器，清空回调函数集合 | - | - | - |

使用说明

1. import断点管理类

import { BreakpointManager } from 'web-multidevice-advanced-ui/src/hookInput';

2. 实例化断点管理类

const breakpointManager = new BreakpointManager({});

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

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

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

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

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

breakpointManager.getBreakpoints();

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

unsubscribe();
breakpointManager.destroy();

类挪移布局组件MultiDiversion

API

父标签

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |---------------|---------|--------|----------------------------------|-----| | direction | 设置横纵向排列 | String | "horizontal"：横向排列"vertical"：纵向排列 | "xs"：vertical "sm"：vertical "md"：horizontal "lg"：horizontal "xl"：horizontal "xxl"：horizontal | | splitLine | 设置是否显示子元素分割线 | Boolean | "true"，"false" | false | | splitLineMode | 设置分割线的类型 | String | "solid"：实线 "dashed"：虚线 "dotted"：点线 | dotted |

子标签

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |----|---|---|---|---| | name | 当前子标签的唯一标识名称(必填) | String | - | - | | diversionCols | 子元素占据的栅格列数 | String / Number | - | 12 | | diversionGap | 子元素内容的左右内边距和 | String / Number | - | 0 |

页签栏组件MultiTabBar

API

父标签

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |----|---|---|---|---| | vertical | 设置是否为纵向 | Boolean | "true"：纵向tab "false"：横向tab | "xs"：false "sm"：false "md"：false "lg"：true "xl"：true "xxl"：true | | barPosition | 设置组件的位置 | String | "start"：容器左侧/顶部 "end"：容器右侧/底部 | "xs"：bottom "sm"：bottom "md"：bottom "lg"：left "xl"：left "xxl"：left | | width | 设置组件的宽度 | String / Number | - | "xs"：100% "sm"：100% "md"：100% "lg"：58px "xl"：58px "xxl"：58px | | height | 设置组件的高度 | String / Number | - | "xs"：78px "sm"：78px "md"：78px "lg"：100% "xl"：100% "xxl"：100% | | unselectedColor | 设置子标签文本字体未选中时的颜色 | String | - | #aaacab | | selectedColor | 设置子标签文本字体选中时的颜色 | String | - | #0b59f7 | | layoutMode | 设置子标签里元素的排布方式 | String | "vertical"：子标签内容垂直排布 "horizontal"：子标签内容水平排布 | "xs"：vertical "sm"：vertical "md"：horizontal "lg"：vertical "xl"：vertical "xxl"：vertical | | verticalAlign | 设置子标签里元素垂直方向上的对齐方式 | String | "top"：顶部对齐 "center"：居中对齐 "bottom"：底部对齐 | center | | horizontalAlign | 设置子标签里元素水平方向上的对齐方式 | String | "start"：起始端对齐 "center"：居中对齐 "end"：末端对齐 | center | | bgColor | 设置子标签未选中时的背景颜色 | String | - | #ffffff | | selectedBgColor | 设置子标签选中时的背景颜色 | String | - | #f1f5ff |

EVENT

| 事件名 | 说明 | 参数 | |----|---|---| | onTabItemClick | 点击页签栏子项触发的事件 | Function({index, name}) "index"：选中子项的索引值 "name"：选中子项的标识名称 |

网格组件MultiGrid

API

父标签

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |----|---|---|---|---| | columnsTemplate | 设置组件每一列的列宽 | String / Number | 1.绝对单位 2.百分比 3.repeat()，接受两个参数：(1)参数1：重复的次数，参数2：需要重复的值 (2)参数1：auto-fill关键字表示自动填充，参数2：每列宽度 (3)参数1：auto-fit关键字表示自动填充，宽度不够时会缩小 3.fr关键字：表示比例关系 4.minmax()：接受最小值和最大值两个参数 5.auto关键字：浏览器自己决定长度 | "xs"：1fr 1fr 1fr 1fr "sm"：1fr 1fr 1fr 1fr "md"：1fr 1fr 1fr 1fr 1fr 1fr "lg"：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr "xl"：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr "xxl"：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr | | rowsTemplate | 设置组件每一行的行高 | String / Number | 同columnsTemplate | auto | | gridRowGap | 设置网格行与行的间隔 | String / Number | - | 0 | | gridColumnGap | 设置网格列与列的间隔 | String / Number | - | 0 | | justifyItems | 设置网格项内容的水平位置 | String | "stretch"：拉伸以填充网格项 "start"：网格项起点位置对齐 "end"：网格项终点位置对齐 "center"：网格项中间位置对齐 | stretch | | alignItems | 设置网格项内容的垂直位置 | String | "stretch"：拉伸以填充网格项 "start"：网格项起点位置对齐 "end"：网格项终点位置对齐 "center"：网格项中间位置对齐 | stretch | | justifyContent | 整个内容区域在容器里的水平位置 | String | "stretch"：未指定大小时拉伸填充容器 "start"：对齐容器的起始边框 "end"：对齐容器的结束边框 "center"：容器内容居中 "space-around"：子项两侧间隔相等 "space-between"：子项间间隔相等，与容器边框无间隔 "space-evenly"：子项间间隔相等 | stretch | | alignContent | 整个内容区域在容器里的垂直位置 | String | 同justifyContent | stretch |

子标签

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |----|---|---|---|---| | name | 当前子标签的唯一标识名称(必填) | String | - | - | | gridColumnStart | 设置左边框所在的起始列号 | String / Number | - | auto | | gridColumnEnd | 设置右边框所在的终点列号 | String / Number | - | auto | | gridRowStart | 设置上边框所在的起始行号 | String / Number | - | auto | | gridRowEnd | 设置下边框所在的终点行号 | String / Number | - | auto | | label | 设置网格项的文本内容(不支持断点) | String | - | - | | icon | 设置网格项的图标链接(不支持断点，只支持网络链接) | String | - | - |

EVENT

| 事件名 | 说明 | 参数 | |----|---|---| | onGridItemClick | 点击网格子项触发的事件 | Function({index, name}) "index"：选中子项的索引值 "name"：选中子项的标识名称 |