自适应布局：pc = mobile + pad

自适应布局

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布局

预览

layout-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布局

预览

layout-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' });

自适应布局：pc = mobile + pad