@hadss/web_adaptive_layout_vue3
v1.0.0-rc.5
Published
Multi-device adaptation advanced component library of the vue3 framework.
Readme
web_adaptive_layout_vue3
介绍
H5框架的多设备适配高阶组件库-Vue3框架封装，提供Vue3框架的高价组件。
目前该库提供的组件如下：
- 侧边栏组件：对标ArkUI的SideBarContainer组件开发的Vue3框架侧边栏组件，使开发者能够轻松的完成侧边栏相关布局能力的开发。
- 栅格组件：对标ArkUI的GridRow/GridCol开发的Vue3框架栅格组件，提供基础的栅格布局能力，使开发能够直接使用ArkUI栅格布局能力。
- 类挪移布局组件: 参考ArkUI的类挪移布局开发的容器组件，使开发者能够轻松的完成类挪移布局能力的开发。
- 页签栏组件：参考ArkUI的Tabs组件开发的Vue3框架页签栏组件，使开发者能够直接实现ArkUI页签栏的能力。
- 网格组件：参考ArkUI的Grid组件开发的Vue3框架网格组件，使开发者能够轻松的完成网格布局能力的开发。
- 分栏组件：参考ArkUI的Navigation组件开发的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,
}
}MultiGridRowCol栅格组件使用示例
1. 导入组件库
import { MultiGridRow, MultiGridCol } from '@hadss/web_adaptive_layout_vue3';2. template中渲染组件
<template>
<MultiGridRow :columns="columns"
:gutter="gutter"
:breakpoints="breakpoints"
:onBreakpointChange="breakpointChangeEvent">
<MultiGridCol :span="span">
xxx内容
</MultiGridCol>
<MultiGridCol span="2">
xxx内容
</MultiGridCol>
</MultiGridRow>
</template>3. 设置组件属性在不同断点下的值或与断点无关的值
setup() {
const columns = reactive({
xs: 4,
sm: 8,
md: 12,
});
const gutter = reactive({
x: 12,
y: {
xs: 5,
sm: 8,
md: 10,
},
});
const breakpoints = reactive({
breakpointValue: { xs: 0, sm: 320, md: 600, lg: 840 },
breakpointReference: "windowSize",
});
const span = reactive({
xs: 1,
sm: 2,
md: 4,
});
const breakpointChangeEvent = (breakpoint) => {
// ...
}
return {
columns,
gutter,
span,
breakpoints,
breakpointChangeEvent,
}
}MultiSideBar侧边栏组件使用示例
1. 导入组件库
import { SideBarContainerVue } from '@hadss/web_adaptive_layout_vue3';2. template中渲染组件 通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。 1. 必须且仅包含2个子组件。 2. 3个或以上子组件，显示第一个和第二个。 3. 1个子组件，显示侧边栏，内容区为空白。
<template>
<SideBarContainerVue :sideBarContainerType="sideBarContainerType"
:showSideBar="showSideBar"
:sideBarWidth="sideBarWidth"
:minSideBarWidth="minSideBarWidth"
:minContentWidth="minContentWidth"
:divider="divider"
:onChangeStatus="changeStatusEvent">
<div>
侧边栏内容
</div>
<div>
内容区内容
</div>
</SideBarContainerVue>
</template>3. 设置组件属性
setup() {
const sideBarContainerType = ref('AUTO');
const showSideBar = ref(true);
const sideBarWidth = ref(400);
const minSideBarWidth = ref(240);
const minContentWidth = ref(360);
const divider = reactive({
strokeWidth: '3px',
color: 'rgba(0, 0, 0, 0.3)',
startMargin: '2px',
endMargin: '2px',
});
const changeStatusEvent = (value: boolean) => {
// ...
};
return {
sideBarContainerType,
showSideBar,
sideBarWidth,
minSideBarWidth,
minContentWidth,
divider,
changeStatusEvent,
}
}MultiNavigation分栏组件使用示例
1. 导入组件库
import { NavigationContainerVue, NavigationBarVue, NavigationContentVue } from '@hadss/web_adaptive_layout_vue3';2. template中渲染组件
<template>
<NavigationContainerVue :navBarWidth="navBarWidth"
:navigationPageName="navigationPageName"
:onNavBarStateChange="onNavBarStateChange">
<NavigationBarVue>
导航栏页面
</NavigationBarVue>
<NavigationContentVue></NavigationContentVue>
</NavigationContainerVue>
</template>3. 在路由表中配置内容区路由信息 Navigation为导航栏页面，children里的路由对应内容区页面。
// router/index.ts
const routes: Array<RouteRecordRaw> = [
{
path: '/navigation',
name: 'Navigation',
component: Navigation,
children: [
{
path: 'pageContent1',
component: PageContent1,
},
{
path: 'pageContent2',
component: PageContent2,
},
]
},
...
]4. 设置组件属性 其中navigationPageName必须传递，值为导航栏页面的路由name值。
setup() {
const navBarWidth = ref(200);
const navigationPageName = ref('Navigation');
const onNavBarStateChange = (isVisible: boolean) => {
// ...
}
return {
navBarWidth,
navigationPageName,
onNavBarStateChange,
}
}