@hadss/web_adaptive_layout_vue3 v1.0.0-rc.4
web_adaptive_layout_vue3
介绍
H5框架的多设备适配高阶组件库-Vue3框架封装，提供Vue3框架的高价组件。
目前该库提供的组件如下： 1. 断点相关组件：使用ArkUI断点能力开发的断点管理组件，能够让开发者直接使用ArkUI断点能力。 2. 自适应显隐容器：对标ArkUI的自适应显隐布局开发的容器，使开发者能够轻松的完成自适应显隐布局能力的开发。 3. 侧边栏组件：对标ArkUI的SideBarContainer组件开发的Vue3框架侧边栏组件，使开发者能够轻松的完成侧边栏相关布局能力的开发。 4. 栅格组件：对标ArkUI的GridRow/GridCol开发的Vue3框架栅格组件，提供基础的栅格布局能力，使开发能够直接使用ArkUI栅格布局能力。 5. 类挪移布局组件: 参考ArkUI的类挪移布局开发的容器组件，使开发者能够轻松的完成类挪移布局能力的开发。 6. 页签栏组件：参考ArkUI的Tabs组件开发的Vue3框架页签栏组件，使开发者能够直接实现ArkUI页签栏的能力。 7. 网格组件：参考ArkUI的Grid组件开发的Vue3框架网格组件，使开发者能够轻松的完成网格布局能力的开发。
目录结构
├─web_adaptive_layout_vue3 // 项目名称
│ ├─src
│ │ ├─components // 组件库源码
│ │ │ ├─multiDiversion // 类挪移组件
│ │ │ │ ├─multiDiversionVue3.vue // 父组件包装器
│ │ │ │ └─diversionItemVue3.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_vue3';2. template中渲染组件
<template>
<MultiDiversionVue :direction="direction"
:splitLine="splitLine">
<DiversionItemVue name="first">
xxx内容
</DiversionItemVue>
<DiversionItemVue name="second">
xxx内容
</DiversionItemVue>
</MultiDiversionVue>
</template>3. 设置组件属性在不同断点下的值或与断点无关的值
setup() {
const direction = reactive({
sm: 'vertical',
md: 'horizontal',
});
const splitLine = ref(false);
return {
direction,
splitLine,
}
}MultiTabBar组件使用示例
1. 导入组件库
import { TabBarContainerVue, TabBarContentVue, TabBarVue, TabBarItemVue } from '@hadss/web_adaptive_layout_vue3';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. 设置组件属性在不同断点下的值或与断点无关的值
setup() {
const vertical = reactive({
sm: true,
md: false,
});
const layoutMode = ref('vertical');
const activeName = ref('first');
return {
vertical,
layoutMode,
activeName,
}
}MultiGrid组件使用示例
1. 导入组件库
import { MultiGridVue, GridItemVue } from '@hadss/web_adaptive_layout_vue3';2. template中渲染组件
<template>
<MultiGridVue :gridRowGap="gridRowGap"
:gridColumnGap="gridColumnGap">
<GridItemVue name="first">
xxx内容
</GridItemVue>
<GridItemVue name="second">
xxx内容
</GridItemVue>
</MultiGridVue>
</template>3. 设置组件属性在不同断点下的值或与断点无关的值
setup() {
const gridRowGap = reactive({
sm: 10,
md: 20,
});
const gridColumnGap = ref(10);
return {
gridRowGap,
gridColumnGap,
}
}5 months ago
7 months ago
7 months ago
7 months ago
7 months ago