Epage

一款基于schema的可视化页面配置工具

快速上手 Demo

特性

可视化

通过可视化方式拖拽、配置，实现可嵌套的栅格布局界面

可扩展

可扩展基础widget、自定义widget、自定义规则等功能

跨框架、组件库渲染

设计器与渲染器分离设计，使得跨框架、组件库的渲染成为可能

表单联动

可视化配置表单字段的值及事件联动关系

事件外放

通过监听widget自定义事件，满足epage实例外部监听内部事件的需求

数据驱动

借助Vue响应式数据能力，统一管理设计器与渲染器的内部状态，使定制、扩展更容易

设计器

// 以`epage-iview`渲染为例
import { render } from 'epage-core'
import Epage from 'epage'
import PCWidgets, { entry as PCEntry } from 'epage-iview'
import H5Widgets, { entry as H5Entry } from 'epage-vant'
import schema from './schema.json'

const el = document.getElementById('root')
new Epage({
  el,
  schema,
  view: 'pc',
  pc: {
    component: PCEntry,
    widgets: PCWidgets,
    Render: render.VueRender
  },
  h5: {
    component: entry,
    widgets: H5Widgets,
    Render: render.VueRender
  }
})

渲染器

// 以`epage-iview`渲染器为例
import { render } from 'epage-core'
import widgets, { entry as component } from 'epage-iview'
import schema from './schema.json'

const el = document.getElementById('root')

new render.VueRender({ el, widgets, schema, component })