相关视频

介绍

EggBornJS的页面组件也是组件Component,除了拥有组件Component的全部特性之外,对组件的Dom结构进行了约定:

  1. 页面组件的根节点必须是eb-page,这是实现pc=mobile+pad跨端自适应布局的基石

页面组件定义

请参考Vue组件的用法

  1. 1<template>
  2. 2 <eb-page>
  3. 3 <eb-navbar :title="$text('Demo')" eb-back-link="Back">
  4. 4 <f7-nav-right>
  5. 5 <eb-link iconF7="::done" ref="buttonDone" :onPerform="onPerformDone"></eb-link>
  6. 6 </f7-nav-right>
  7. 7 </eb-navbar>
  8. 8 <f7-block-title medium></f7-block-title>
  9. 9 <f7-block strong></f7-block>
  10. 10 </eb-page>
  11. 11</template>
  12. 12<script>
  13. 13export default {
  14. 14 meta: {
  15. 15 global: false,
  16. 16 size: 'small',
  17. 17 title: 'page title',
  18. 18 },
  19. 19 data() {
  20. 20 return {};
  21. 21 },
  22. 22 methods: {
  23. 23 },
  24. 24};
  25. 25</script>
  26. 26<style scoped>
  27. 27</style>

Dom节点

名称 是否必须 说明
eb-page 页面组件的根节点,是实现pc=mobile+pad跨端自适应布局的基石
eb-navbar 页面组件的导航节点
f7-nav-right 在导航节点的后侧渲染内容,一般是按钮或者链接
  • eb-page:在Framework7的f7-page组件的基础上改造而来,参见:f7-page

  • eb-navbar:在Framework7的f7-navbar组件的基础上改造而来,参见:f7-navbar

meta元数据

页面组件可提供meta元数据,以便标示页面组件的行为

  1. 1meta: {
  2. 2 size: 'small',
  3. 3 sizeFixed: false,
  4. 4 title: 'page title',
  5. 5},
名称 缺省值 说明
size small 页面组件的显示尺寸,有三种选择:small/medium/large
sizeFixed false 页面组件设置的size一般作为参考尺寸,也就是说,系统会根据页面的实际尺寸对size做调整。如果要将size固定,就需要将sizeFixed设置为true
title 页面组件的标题,主要用于PC模式下顶部Tabs导航栏的文本显示。一般不用设置,系统会自动从eb-navbar节点获取标题

如何创建页面组件

可以使用Cli命令创建页面组件,并且自动添加页面组件的路由记录

  1. 1$ cd /path/to/project
  2. 2# 创建.vue页面
  3. 3$ npm run cli :create:page
  4. 4# 创建.jsx页面
  5. 5$ npm run cli :create:pagex