@hadss/web_adaptive_layout_vue2 NPM

web_adaptive_layout_vue2

介绍

H5框架的多设备适配高阶组件库-Vue2框架封装，提供Vue2框架的高阶组件。

目前该库提供的组件如下： 1. 断点相关组件：使用ArkUI断点能力开发的断点管理组件，能够让开发者直接使用ArkUI断点能力。 2. 自适应显隐容器：对标ArkUI的自适应显隐布局开发的容器，使开发者能够轻松的完成自适应显隐布局能力的开发。 3. 侧边栏组件：对标ArkUI的SideBarContainer组件开发的Vue2框架侧边栏组件，使开发者能够轻松的完成侧边栏相关布局能力的开发。 4. 栅格组件：对标ArkUI的GridRow/GridCol开发的Vue2框架栅格组件，提供基础的栅格布局能力，使开发能够直接使用ArkUI栅格布局能力。 5. 类挪移布局组件: 参考ArkUI的类挪移布局开发的容器组件，使开发者能够轻松的完成类挪移布局能力的开发。 6. 页签栏组件：参考ArkUI的Tabs组件开发的Vue2框架页签栏组件，使开发者能够直接实现ArkUI页签栏的能力。 7. 网格组件：参考ArkUI的Grid组件开发的Vue2框架网格组件，使开发者能够轻松的完成网格布局能力的开发。

目录结构

├─web_adaptive_layout_vue2 // 项目名称
│  ├─src
│  │  ├─components // 组件库源码
│  │  │  ├─multiDiversion // 类挪移组件
│  │  │  │  ├─multiDiversion.vue // 父组件包装器
│  │  │  │  └─diversionItem.vue // 子组件包装器
│  │  │  └─...
│  │  ├─utils // 公共方法
│  │  │  ├─getBreakpoint.ts // 断点方法
│  │  │  └─...
│  │  └─index.ts // 组件库入口文件
│  ├─LICENSE
│  ├─vite.config.ts // 打包配置文件
│  ├─tsconfig.json // typeScript配置文件

使用说明

全局断点配置

1. 配置全局断点区间

在工程资源目录public中添加断点配置文件adaptiveui.config.js，定义自己需要的断点区间。

window.adaptiveUiConfig = {
  breakpoint: {
    xs: 0,
    sm: 320,
    md: 600,
    lg: 840,
    xl: 1440,
  },
};

2. 在工程入口引入断点配置文件

在工程资源目录public中找到入口文件index.html，在“head”标签中通过“script”标签直接引入断点配置文件。

<head>
  <script src="./adaptiveui.config.js"></script>
</head>

MultiDiversion组件使用示例

1. 导入组件库

import { MultiDiversionVue, DiversionItemVue } from '@hadss/web_adaptive_layout_vue2';

2. template中渲染组件

<template>
  <MultiDiversionVue :direction="direction"
                     :splitLine="splitLine">
    <DiversionItemVue name="first">
      xxx内容
    </DiversionItemVue>
    <DiversionItemVue name="second">
      xxx内容
    </DiversionItemVue>
  </MultiDiversionVue>
</template>

3. 设置组件属性在不同断点下的值或与断点无关的值

data() {
  return {
    direction: {
      sm: 'vertical',
      md: 'horizontal',
    },
    splitLine: false,
  }
},

MultiTabBar组件使用示例

1. 导入组件库

import { TabBarContainerVue, TabBarContentVue, TabBarVue, TabBarItemVue } from '@hadss/web_adaptive_layout_vue2';

2. template中渲染组件

<template>
  <TabBarContainerVue :vertical="vertical">
    <TabBarContentVue></TabBarContentVue>
    <TabBarVue v-model="activeName"
               :layoutMode="layoutMode">
      <TabBarItemVue name="first">
        xxx内容
      </TabBarItemVue>
      <TabBarItemVue name="second">
        xxx内容
      </TabBarItemVue>
    </TabBarVue>
  </TabBarContainerVue>
</template>

3. 设置组件属性在不同断点下的值或与断点无关的值

data() {
  return {
    vertical: {
      sm: true,
      md: false,
    },
    layoutMode: 'vertical',
    activeName: 'first',
  }
},

MultiGrid组件使用示例

1. 导入组件库

import { MultiGridVue, GridItemVue } from '@hadss/web_adaptive_layout_vue2';

2. template中渲染组件

<template>
  <MultiGridVue :gridRowGap="gridRowGap"
                :gridColumnGap="gridColumnGap">
    <GridItemVue name="first">
      xxx内容
    </GridItemVue>
    <GridItemVue name="second">
      xxx内容
    </GridItemVue>
  </MultiGridVue>
</template>

3. 设置组件属性在不同断点下的值或与断点无关的值

data() {
  return {
    gridRowGap: {
      sm: 10,
      md: 20,
    },
    gridColumnGap: 10,
  }
},

component library adaptive_layout vue

@hadss/web_adaptive_layout_ui

4 months ago

7 months ago

7 months ago

7 months ago

7 months ago