web-multidevice-advanced-vue2

介绍

H5框架的多设备适配高阶组件库vue2包装器

使用说明

以类挪移布局组件MultiDiversion为例

1. import断点管理类和组件库

import { BreakpointManager } from 'web-multidevice-advanced-ui/src/hookInput';
// MultiDiversion组件
import { MultiDiversionVue, DiversionItemVue } from 'web-multidevice-advanced-vue2/src';
// MultiTabBar组件
import { TabBarVue, TabBarItemVue } from 'web-multidevice-advanced-vue2/src';
// MultiGrid组件
import { MultiGridVue, GridItemVue } from 'web-multidevice-advanced-vue2/src';

const breakpointManager = new BreakpointManager();

2. template中渲染组件

<template>
  <MultiDiversionVue :direction=direction>
    <DiversionItemVue>
      xxx内容
    </DiversionItemVue>
    <DiversionItemVue>
      xxx内容
    </DiversionItemVue>
  </MultiDiversionVue>
</template>

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

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

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

beforeDestroy() {
  this.unsubscribe();
  breakpointManager.destroy();
}