自适应布局
CabloyJS前端所有页面开发采用移动优先
策略,同时完美适配PC布局
- CabloyJS动态监测网页宽度的变化,当宽度小于
阈值
时显示Mobile布局
,当宽度大于阈值
时显示PC布局
- PC布局采用独特的布局管理模式,实现
pc = mobile + pad
的风格
这种自适应策略,将Mobile场景的操控体验和开发模式无缝带入PC场景,只需开发一套代码即可通用Mobile和PC两个场景
布局管理器
CabloyJS内置了一套Mobile布局
和PC布局
,也可以完全定制自己的布局管理器
开发布局管理器
,其实就是开发布局组件
,然后修改前端的Config
配置即可
src/front/config/config.js
export default{
layout: {
"breakpoint": 800,
"items": {
"mobile": {
"module": "a-layoutmobile",
"component": "layout"
},
"pc": {
"module": "a-layoutpc",
"component": "layout"
}
}
},
};
名称 | 说明 |
---|---|
breakpoint | 阈值:用于布局切换 |
module | 布局所属模块的名称 |
component | 模块中的布局组件 |
最佳实践:以模块
a-layoutmobile
或a-layoutpc
为基础,按自己的意图调整布局逻辑
Mobile布局
模块a-layoutmobile
实现了一套Mobile布局
预览
Config配置
可以通过修改模块的Config
配置定制布局
a-layoutmobile/front/src/config/config.js
export default {
layout: {
login: '/a/login/login',
loginOnStart: true,
toolbar: {
tabbar: true, labels: true, bottomMd: true,
},
tabs: [
{ name: 'Home', tabLinkActive: true, iconMaterial: 'home', url: '/a/base/menu/list' },
{ name: 'Atom', tabLinkActive: false, iconMaterial: 'group_work', url: '/a/base/atom/list' },
{ name: 'Mine', tabLinkActive: false, iconMaterial: 'person', url: '/a/user/user/mine' },
],
},
};
名称 | 缺省值 | 说明 |
---|---|---|
layout.login | /a/login/login | 用于登录的页面组件路径 |
layout.loginOnStart | true | 进入系统时,如果是匿名用户,是否要打开登录页面 |
layout.toolbar | Tabs导航栏配置 | |
layout.tabs | Tabs按钮配置 |
PC布局
模块a-layoutpc
实现了一套PC布局
预览
Config配置
可以通过修改模块的Config
配置定制布局
a-layoutpc/front/src/config/config.js
export default {
layout: {
login: '/a/login/login',
loginOnStart: true,
header: {
buttons: [
{ name: 'Home', iconMaterial: 'dashboard', url: '/a/base/menu/list', target: '_dashboard' },
{ name: 'Atom', iconMaterial: 'group_work', url: '/a/base/atom/list' },
],
mine:
{ name: 'Mine', iconMaterial: 'person', url: '/a/user/user/mine' },
},
size: {
small: 320,
top: 60,
spacing: 10,
},
},
};
名称 | 缺省值 | 说明 |
---|---|---|
layout.login | /a/login/login | 用于登录的页面组件路径 |
layout.loginOnStart | true | 进入系统时,如果是匿名用户,是否要打开登录页面 |
layout.header | 头部导航栏配置 | |
layout.size | 页面尺寸配置 |
页面尺寸
- 在
Mobile
场景下,所有页面尺寸都是small
类型 - 在
PC
场景下,页面尺寸有三种类型:small
、middle
、large
,默认是small
指定页面尺寸
可通过页面组件的meta
元数据指定页面尺寸
<template>
</template>
<script>
export default {
meta: {
size: 'small',
},
data() {
return {};
},
methods: {
},
};
</script>
<style scoped>
</style>
页面标题
模块a-layoutpc
会自动提取页面组件中eb-navbar
元素的title
属性,然后显示在头部导航栏中
当然也可通过页面组件的meta
元数据指定页面标题
<template>
</template>
<script>
export default {
meta: {
title: 'Sign in',
},
data() {
return {};
},
methods: {
},
};
</script>
<style scoped>
</style>
页面打开方式
一般而言,新页面组件会依次在当前页面组件右侧
打开。除此默认方式外,还有其他三种打开方式:
_self
: 在当前View
中打开_group
: 在导航栏打开一个新的Tab Group
_dashboard
: 也会在导航栏打开一个新的Tab Group
,但与_group
不同的是,_dashboard
页面里面所有的页面链接都会以_group
方式打开
可以通过方法$view.navigate
传递target
属性,指定页面打开方式
this.$view.navigate('/test/party/kitchen-sink/about', { target: '_self' });
评论: