自适应布局:pc = mobile + pad

2018-11-29 12:57:20

自适应布局

Cabloy前端所有页面开发采用移动优先策略,同时完美适配PC布局

  1. Cabloy动态监测网页宽度的变化,当宽度小于阈值时显示Mobile布局,当宽度大于阈值时显示PC布局
  2. PC布局采用独特的布局管理模式,实现pc = mobile + pad的风格

这种自适应策略,可以实现一套前端代码完美匹配MobilePC多场景,从而显著提升开发效率,也带来一致的用户体验

布局管理器

Cabloy内置了一套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 模块中的布局组件

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 页面尺寸配置

页面尺寸

  1. Mobile场景下,所有页面尺寸都是small类型
  2. PC场景下,页面尺寸有三种类型:smallmiddlelarge,默认是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>

页面打开方式

一般而言,新页面组件会依次在当前页面组件右侧打开。除此默认方式外,还有其他三种打开方式:

  1. _self: 在当前View中打开
  2. _group: 在导航栏打开一个新的Tab Group
  3. _dashboard: 也会在导航栏打开一个新的Tab Group,但与_group不同的是,_dashboard页面里面所有的页面链接都会以_group方式打开

可以通过方法$view.navigate传递target属性,指定页面打开方式

this.$view.navigate('/test/todo/test/echo', { target: '_self' });


评论: