Epage

# 配置

本文主要介绍 Epage 如何在项目中使用以及项目启动后如何配置

# 核心功能

  • 布局：24栅格布局
  • 规则：
    • 是否必填
    • 多重校验
    • 每个widget可以有自己的规则选项
    • 内置String、Number、Boolean 规则类型，已扩展邮箱(email)、地址(url)、正则(regexp)类型，用户也可自己开发扩展自定义规则
  • 扩展：
    • widget
      • 属性配置可扩展
      • 对于一些widget如，单选(Radio)、多选选(Checkbox)、下拉(Select)等，选项的数据配置支持两种模式：手动输入及动态api获取，动态数据可能需要写一个简单的adapter 适配接口返回的数据，具体可以参考数据部分

# 设计器使用方式

# npm 方式引入

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'
import 'epage/src/style/main.less'
import 'epage-iview/src/style/main.less'
// 或者css
// import 'epage/dist/epage.css'
// import 'epage-iview/dist/epage-iview.css'

//!! 为了使移动端与pc端配置widget时，使用相同Setting表单
//!! 这里移动端Setting借用pc的Setting能力，未来会会改进用法
const h5Widgets = vantWidgets.map((group, index) => {
  group.widgets.map((widget, key) => {
    widget.Setting = pcWidgets[index].widgets[key].Setting
    return widget
  })
  return group
})

const el = document.getElementById('root')
new Epage({
  el,
  schema,
  // 非必填，默认渲染视图
  view: 'pc',
  // pc 与 h5属性必填一个
  pc: {
    component: PCEntry,
    widgets: PCWidgets,
    Render: render.VueRender
  },
  h5: {
    component: entry,
    widgets: H5Widgets,
    Render: render.VueRender
  }
})
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

# script 方式引入

<link href='https://cdn.bootcss.com/iview/3.5.1/styles/iview.css' rel='stylesheet'></link>
<link href='./epage.css' rel='stylesheet'></link
<link href='./epage-iview.css' rel='stylesheet'></link

<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js' ></script>
<script src='https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js' ></script>
<script src='https://cdn.bootcss.com/iview/3.5.1/iview.min.js' ></script>
<script src='//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js' ></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js' ></script>
<script src="./epage-core.min.js"></script>
<script src="./epage.min.js"></script>
<script src="./epage-iview.min.js"></script>

<script>
const { default as PCWidgets, entry as PCEntry } = EpageIview
const { default as H5Widgets, entry as H5Entry } = EpageVant
const { render } = EpageCore
const h5Widgets = vantWidgets.map((group, index) => {
  group.widgets.map((widget, key) => {
    widget.Setting = pcWidgets[index].widgets[key].Setting
    return widget
  })
  return group
})

const el = document.getElementById('root')
new Epage({
  el,
  schema,
  // 非必填，默认渲染视图
  view: 'pc',
  // pc 与 h5属性必填一个
  pc: {
    component: PCEntry,
    widgets: PCWidgets,
    Render: render.VueRender
  },
  h5: {
    component: entry,
    widgets: H5Widgets,
    Render: render.VueRender
  }
})
</script>
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

# 设计器部分

从界面来看，分三个主要面板：

  • 工具面板(左)：已注册到设计器的 widget 列表
  • 工作面板(中)：设计视图(design)、预览视图(preview)、逻辑配置(logic)、Schema编辑(schema)
  • 属性面板(右)：选中的widget属性配置和全局属性配置

# 工具面板

展示new Epage时传入的widgets

工作面板分为四个视图：设计、预览、逻辑、Schema

# 设计视图

选中指定widget即可在属性面板展示当前widget属性

# 预览视图

在设计视图配置完成后，切换到预览视图即可看到最终渲染的界面。

TIP

此视图下更改属性面板属性，不会立即生效

# 逻辑视图

此视图主要针对表单场景，配置表单之间的级联关系。如显隐、是否禁用属性的联动。常见的联动逻辑分为两类：值逻辑(value logic) 和 事件逻辑(event logic)

  • 值逻辑： 指定widget的值符合某种条件时，使其他widget属性发生变化或响应某个事件的逻辑
  • 事件逻辑： widget响应已定义好的事件时，使其他widget发生变化或事件的逻辑

# Schema视图

Epage提供可实时生成的schema数据，方便复制、导入等

# 属性面板（widget）

选中特定widget即可在属性面板查看属性，属性与当前widget的schema定义一一对应.

WARNING

schema定义中只是基础widget常用属性，对于扩展开发widget属性也自行定义，请务必将自定义属性放在schema.option对象内

# 属性面板（表单）

全属性配置

# 标题

给schema其个名字

# 描述

schema用途

# 宽度(px)

配置表单时，全局label宽度，单位：像素

# 尺寸

配置表单时，widget尺寸大小： 大(large)， 默认(default)、 小(small)

# 标题位置

配置表单时，全局控制label位置： 上， 左、 右

# 规则配置

规则配置针对表单场景而言，分： 内置规则、扩展规则

# 必填

必填时会在label旁出现红色星号(*)

# 字符串

可配置：最小长度、最大长度。不填则不限制。

例：低于最小长度给一个错误提示文案，超过最大长度给另一个提示文案？

实现：配置两个规则：规则一填写最小长度及错误提示，规则二填写最大长度及错误提示

# 邮箱

要求符合email规范

# 网址

可以为http://test.com、https://test.com、ftp://test.com、//test.com等形式，具体可以参考 URL (opens new window)

# 正则

通过填写正则表达式，满足高级校验规则。具体规则可以参考 正则表达式 (opens new window)。一些示例如下：

# 常见正则表达式：

描述 正则 备注
手机号 ^1\d{10}$ 数字 1 开始的11位数字
字母开始的字符串 ^[a-zA-Z]+
带1-2位小数的正数或负数 ^(\-)?\d+(\.\d{1,2})?$
汉字 ^[\u4e00-\u9fa5]{0,}$
长度为2-10的任意字符 ^.{2, 10}$
18位身份证号码(数字、字母x结尾) ^((\d{18})|([0-9x]{18})|([0-9X]{18}))$
中国邮政编码 ^[1-9]\d{5}(?!\d)$

# 规则扩展

对于特定业务，以上规则往往还是不能满足需求，需要开发者自行开发相关规则，并引入到对应widget中，具体规则开发文档可参考 规则 部分

# 数据源

数据源指一些如checkbox、radio、select、cascader等widget，可选项数据的来源

分为 静态数据 和 动态数据

# 静态数据

指配置表单时，用户手动输入可选项的数据

# 动态数据

指配置表单时，通过配置接口，发送http请求获取的数据源。

由于同源策略的限制，浏览器不能直接发跨域请求，需要通过jsonp或代理或CORS等方式告诉服务端需要什么数据，所以在调用接口时依赖服务端支持。

配置动态数据需要配置以下两个重要字段：

# 配置接口 字段

这里填写一个http地址，如：

http://test.com/department/list?limit=30
1

# 配置转换器 字段

配置动态数据场景，对服务端返回的数据，经过转换器脚本处理，转换为widget可以直接使用的数据，为空则不做处理。如：

return data.data.list.map(function(item) {
  return { key: item.id, value: item.name }
})
1
2
3

# 数据格式

我们约定：静态数据及动态数据最终的数据格式都为[{key, value}, ...]，如：

[
  { key: 'name', value: '橙子' }
  // ...
]
1
2
3
4

# 数据类型

指widget最终渲染成表单时的表单值类型，对于需要配置可选项的widget，数据类型仅支持：string、number

WARNING

在做类型切换时，务必确认可选项的key是否能被转换，否则渲染及最终提交表单值可能不符合预期

关于动态数据示例请参考Select

更新: 3/24/2021, 7:06:55 PM

← 使用场景 →