Epage

# epage设计器

设计器核心模块

import { render } from 'epage-core'
import iviewWidgets, { entry as PCEntry } from 'epage-iview'
import vantWidgets, { entry as H5Entry } from 'epage-vant'

const epage = new Epage(config)
1
2
3
4
5

# config.el

必填 类型 说明
是 Dom 设计器挂载的dom节点

# config.schema

必填 类型 说明
否 Object 通过epage创建生成的shema实例

示例：

{
  "key": "kuEXemrCZ",
  "widget": "grid",
  "hidden": false,
  "container": true,
  "option": {},
  "style": {},
  "label": {
    "width": 80,
    "position": "right",
    "colon": false
  },
  "children": [
    {
      "span": 24,
      "list": []
    }
  ],
  "title": "",
  "description": "",
  "size": "default",
  "logics": [],
  "store": {
    "dicts": [],
    "apis": []
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# config.view

必填 类型 说明
否 String 创建设计器默认视图，可选pc及h5

# config.pc

必填 类型 说明
与以下h5必选其一 Object 设计器内渲染器配置

示例：

// import { render } from 'epage-core'
// import widgets, { entry } from 'epage-iview'

{
  widgets,           // widgets列表，用于提前注册
  component: entry,  // 渲染入口，widgets库应提供entry导出
  Render: VueRender  // 渲染器，通过可使用epage-core内部提供，render.VueRender
}
1
2
3
4
5
6
7
8

# config.h5

必填 类型 说明
与以上pc必选其一 Object 设计器内渲染器配置

示例：

// import { render } from 'epage-core'
// import widgets, { entry } from 'epage-vant'

{
  widgets,           // widgets列表，用于提前注册
  component: entry,  // 渲染入口，widgets库应提供entry导出
  Render: VueRender  // 渲染器，通过可使用epage-core内部提供，render.VueRender
}
1
2
3
4
5
6
7
8

# config.panels

必填 类型 说明
否 Object 自定义面板配置

每个单独面板均支持false及对象配置，其中false表示不显示，对象配置如下：

{
  render: ({el ,store, ctx}) => {
    new render.VueRender({ el, store, component: entry })
  },
  style: 'color: red;'
}
1
2
3
4
5
6
7

# config.panels.header

必填 类型 说明
否 Object 或 Boolean 顶部面板配置，false为不显示

示例：

{
  // left: false,    // 不显示
  left: {
    render: ({el, store, ctx}) => {},
    style: ''
  },
  // center: false,  // 不显示
  center: {
    render: ({el, store, ctx}) => {},
    style: ''
  },
  // right: false,   // 不显示
  right: {
    render: ({el, store, ctx}) => {},
    style: ''
  },
  style: 'color: red;',
  render: ({el, store, ctx}) => {} // 此处定义render将替换 left、center、right字段配置
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# config.panels.tool

必填 类型 说明
否 Object 或 Boolean 工具面板配置，false为不显示

示例：

{
  render: ({el ,store, ctx}) => {
    el.innerHTML = 'tool panel'
  },
  style: 'color: red;'
}
1
2
3
4
5
6

# config.panels.setting

必填 类型 说明
否 Object 或 Boolean 配置面板配置，false为不显示

示例：

{
  render: ({el ,store, ctx}) => {
    el.innerHTML = 'setting panel'
  },
  style: 'color: red;'
}
1
2
3
4
5
6
必填 类型 说明
否 Object 或 Boolean 底部状态面板配置，默认false，false为不显示

示例：

{
  render: ({el ,store, ctx}) => {
    el.innerHTML = 'footer panel'
  },
  style: 'color: red;'
}
1
2
3
4
5
6

# config.plugins

必填 类型 说明
否 Array 自定义插件

示例：

class EpageCustomPlugin {
  // epage 为设计器实例
  apply(hooks, epage) {
    // 生命周期参考下方 生命周期钩子 说明
    hooks.life.beforeCreate.tap(function ({ ctx })  {
      console.log(11, ctx)
    })
     // hooks.life及hooks.schema的钩子，ctx为设计器实例
     // hooks.render的钩子，ctx为渲染器实例
  }
}
// 示例配置
{
  plugins: [
    new EpageCustomPlugin()
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# config.settings

必填 类型 说明
否 Array 所有widget默认setting表单

说明：

settings的数组元素定义：

  • key：必填，字符串类型。面板唯一key，每个设置面板需保持唯一
  • name：必填，字符串类型。显示名称
  • framework：非必填，可选值vue及react（使用此值时，component需为标准vue及react组件，且使用内置VueRender或ReactRender渲染）
  • component：必填，vue组件、react组件或函数

为每个setting tab面板表单，其中key字段需保持唯一，内置key有以下3个：

  • prop：属性面板
  • style：样式面板
  • global：页面面板

单个widget.Setting支持直接vue组件或react组件，也支持数组，使用方法与此处相同。key相同的情况下优先级关系：

widget.Setting > config.settings > 内置默认

setting示例：

{
  settings: [{
    key: 'custom',
    name: '自定义面板',
    // 用framework属性将使用内置渲染器，
    // framework: 'vue',
    component: ({ el, store }) => {
      el.innerHTML = 'custom panel'
    },
  }, {
    key: 'test',
    name: '测试面板',
    // 用此属性将使用内置渲染器，
    framework: 'vue',
    component: VueComponent, // 可以是vue组件
  }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

示例：

{
  settings: [{
    key: 'prop',  // 会复写默认属性配置面板
    name: '属性',
    // 用此属性将使用内置渲染器，
    // framework: 'vue',
    component: function ({ el, store }) {},
  }]
}
1
2
3
4
5
6
7
8
9
import { render } from 'epage-core'
import iviewWidgets, { entry as PCEntry } from 'epage-iview'
import vantWidgets, { entry as H5Entry } from 'epage-vant'

class EpageCustomPlugin {
  apply(hooks, epage) {
    // 生命周期参考下方 生命周期钩子 说明
    hooks.life.beforeCreate.tap(function ({ ctx })  {
      console.log(ctx)
    })
     // hooks.life及hooks.schema的钩子，ctx为设计器实例
     // hooks.render的钩子，ctx为渲染器实例
  }
}

const config = {
  // 必填
  el,
  // 非必填
  schema,
  // 旧用法，未来会替换，不止双端设计器，建议使用新用法
  widgets: iviewWidgets,
  // 旧用法，未来会替换，不止双端设计器，建议使用新用法
  Render: render.VueRender,
  // 下方均为新用法
  view: 'pc', // 非必填，默认pc，设计器默认渲染视图
  // 新用法中pc 与h5其一必填，或两个都有
  pc: {
    widgets: iviewWidgets,
    component: PCEntry, // 渲染入口
    Render: render.VueRender
  },
  h5: {
    widgets: vantWidgets,
    component: H5Entry, // 渲染入口
    Render: render.VueRender
  },
  // 非必填，全局扩展配置面板：所有widget都会有此配置
  // 一般替换或增强内置全局配置，只要没志向key 为
  // prop | style | global 即可替换内置
  // 属性 | 样式 | 页面配置
  // 用法与下方 `widget.Setting` 椅子
  settings: [{
    key: 'prop',
    name: '自定义属性',
    // 用此属性将使用内置渲染器，
    // framework: 'vue',
    component: function ({ el, store }) {},
  }],
  // 非必填，定制面板
  panels: {
    header: {
      // 有render方法时，left、center、right属性失效
      // style属性不影响
      render: function({ el, store }) {
        el.innerHTML = 'Epage Header'
      },
      // 非必填
      style: 'font-size: 20px;',
      // 左侧标题
      left: {
        render: function({ el, store }) {
          el.innerHTML = 'Epage Title'
        },
        style: 'font-size: 20px;',
      },
      center,           // 同 left
      right: {
        logic: false,   // 隐藏逻辑按钮
        schema: false,  // 隐藏schema按钮
        preview: false, // 隐藏预览按钮
        help: false,    // 隐藏帮助链接
        style,          // 同 left.style
        render,         // 同 left.render
      }
    }
  },
  // 非必填
  plugins: [
    new EpageCustomPlugin()
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

# epage.el

设计器挂载的Dom节点，可以不插入到真实document中

new Epage({
  el: document.createElement('div'), // 使工作面板不用在真实document中，高度定制设计器可使用
  // 其他参数
})
1
2
3
4

# epage.store

设计器内部状态，在编辑模式下，会共享给内部渲染器。预览视图下，渲染器内部store，根据设计器生成的schema重新new Store，以隔离与设计器状态

# epage.render

设计器通过调用此方法创建设计器实例，返回实例（这里实际返回new Vue()实例），赋值给epage.$$origin。

# epage.destroy

销毁设计器。会销毁事件绑定， 生命周期勾子，内部store清空操作。此期间可以注入life.beforeDestroy及life.destroyed生命周期勾子

class CustomPlugin {
  apply(hooks, epage) {
    // 生命周期参考下方 生命周期钩子 说明
    hooks.life.beforeDestroy.tap(function ({ ctx })  {
      console.log(ctx.store.getSchema())
    })
    hooks.life.destroyed.tap(function ({ ctx })  {
      console.log(ctx)
    })
  }
}

new Epage({
  // ...其他参数
  plugins: [new CustomPlugin()]
})
epage.destroy()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# epage.panels

同上方config.panels参数

# epage.settings

同上方config.settings参数

# epage.plugins

同上方config.plugins参数

# epage.pc

同上方config.pc参数

# epage.h5

同上方config.h5参数

# epage.env

同上方config.env参数。目前无特别用处

# epage.view

同上方config.view参数。默认渲染视图

# epage.Render

为兼容旧用法config.Render参数。实例时不建议使用

# epage.widgets

为兼容旧用法config.widgets参数。实例时不建议使用

# epage.component

为兼容旧用法config.component参数。实例时不建议使用

# epage.schema

同上方config.schema参数。初始化schema值

# epage.$render

设计器内部渲染器实例引用。

# epage.$hooks

设计器hooks状态，可用于查看

# epage.$$origin

设计器render返回值

更新: 4/6/2021, 11:10:45 PM

← render渲染器 →