相关视频

介绍

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