# render渲染器
主要api主要有以下：
import { render } from 'epage-core'
import widgets, {
entry, // 必须导出
setting, // 根据widget库情况导出，为简化widget配置表单
viewExtend, // 根据widget库情况导出，为简化widget配置表单
inputWidget,
textareaWidget,
inputNumberWidget,
selectWidget,
cascaderWidget,
autoCompleteWidget,
radioWidget,
checkboxWidget,
datePickerWidget,
timePickerWidget,
switchWidget,
rateWidget,
uploadWidget,
lineWidget,
gridWidget,
buttonWidget
} from 'epage-iview'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# widgets
说明及示例访问examples，基础widgets列表
# entry
渲染入口，对于不同widgets库单独实现，具体参考epage-iview#entry (opens new window)
# setting
设计widget的表单配置模块。
console.log(setting)
/*
{
SettingForm, // vue 组件
settingExtend, // vue 组件 extend
components
}
*/
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# setting.SettingForm
<template>
<setting-form :orders='orders' :store='store' />
</template>
<script>
import { setting } from 'epage-iview'
const { SettingForm } = setting
export default {
components: { SettingForm }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
属性说明：
orders: 设置表单的配置项顺序，可不填写，默认：
console.log(orders)
/*
[
{ key: 'key' },
{ key: 'name' },
{ key: 'title' },
{ key: 'placeholder' },
{ key: 'description' },
{ key: 'help' },
{ key: 'disabled' },
{ key: 'rule' }
]
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# setting.settingExtend
与开发widget的Setting.vue一起使用
<template>
<setting-form :orders='orders' :store='store' />
</template>
<script>
import { setting } from 'epage-iview'
const { settingExtend } = setting
export default {
extends: settingExtend
}
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
注入以下内容：
| 名称 | 注入方式 | 说明 |
|---|---|---|
SettingForm | components | |
setting | props | 同前面提到setting |
store | props | |
selectedSchema | computed | computed方式注入到当前Setting.vue组件中 |
# setting.components
开发Setting.vue经常用到的vue组件
console.log(setting.components)
/*
{
DataSource, // 用于处理静态数据源和接口动态数据源
FieldTip, // 字段提示
MoveBtn // 添加、删除、上移、下移组合行为
}
*/
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
DataSource属性
| 属性名 | 类型 | 默认值 | 备注 |
|---|---|---|---|
dataType | object | string | object | 动态数据每一项的数据格式，为object时，每一项为{key, value},string时，每一项为单值 |
store | Object | store | new Epage 统一的store |
workerAction | string | fetch | 处理new EpageCore.Worker时的消息字段action，请参考EpageCore.Worker |
FieldTip属性
| 属性名 | 类型 | 默认值 | 备注 |
|---|---|---|---|
content | string | '' | 需要提示方式展示富文本 |
MoveBtn
属性：
| 属性名 | 类型 | 默认值 | 备注 |
|---|---|---|---|
index | number | -1 | 当前点击的元素index值 |
list | array | [] | 待操作的列表数组 |
事件：
| 属性名 | 参数 | 备注 |
|---|---|---|
on-move-up | index | 当前点击的元素index值 |
on-move-down | index | 当前点击的元素index值 |
on-delete | index | 当前点击的元素index值 |
on-add | index | 当前点击的元素index值 |
# Render渲染器实例
渲染器构造函数
import { render } from 'epage-core'
const el = document.getElementById('root')
new render.VueRender({
el, // 必填，最终渲染的真实dom节点
component: entry, // 必填，渲染入口
widgets, // 必填，待注册的widget列表，
schema, // 非必填。初始的页面schema，不填将什么也不渲染，除非在设计器内新建，否则应该传入此参数
mode: 'edit' // 非必填。展示模式，主要针对表单，默认'edit'，还可为'display'，表示显示模式
store, // 非必填。渲染可以借助外部实例化的store，这里主要针对设计器设计模式下共享设计器store
Rule, // 非必填。如果有用户自定义规则可以很内置规则实现增强配置时增加更多可选规则
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Render实例方法：
# render.validateFields()
校验表单所有字段，返回Promise
# render.resetFields()
重置表单，返回Promise
# render.destroy()
销毁Render实例，dom会被移除
# render.on(key, eventType, callback)
监听内部暴露的事件，如给按钮添加外部事件进行校验并打印表单数据：
render.on('kxxxxF', 'click', function(){
render.validateFields().then(() => {
const formdata = render.store.getFormData()
console.log(formdata)
})
})
1
2
3
4
5
6
2
3
4
5
6
# render.off(key, eventType, callback)
取消通过on绑定的事件。
// 移除按钮的指定click事件
render.off('kxxxxF', 'click', myCallback)
// 或者移除按钮的所有click事件
render.off('kxxxxF', 'click')
// 或者移除按钮的所有事件绑定
render.off('kxxxxF')
1
2
3
4
5
6
2
3
4
5
6
Render实例属性：
# render.el
渲染的真实dom节点
# render.mode
针对表单场景，渲染模式，可选edit及display
# render.$$origin
内部渲染实例引用，针对基于Vue的渲染器，将指向new Vue()
# render.store
内部全局状态，用法参照 epage-store
# 基础widget
# inputWidget
说明及示例访问inputWidget
# textareaWidget
说明及示例访问textareaWidget
# inputNumberWidget
说明及示例访问inputNumberWidget
# selectWidget
说明及示例访问selectWidget
# cascaderWidget
说明及示例访问cascaderWidget
# autoCompleteWidget
说明及示例访问autoCompleteWidget
# radioWidget
说明及示例访问radioWidget
# checkboxWidget
说明及示例访问checkboxWidget
# datePickerWidget
说明及示例访问datePickerWidget
# timePickerWidget
说明及示例访问timePickerWidget
# switchWidget
说明及示例访问switchWidget
# rateWidget
说明及示例访问rateWidget
# uploadWidget
说明及示例访问uploadWidget
# lineWidget
说明及示例访问lineWidget
# gridWidget
说明及示例访问gridWidget
# buttonWidget
说明及示例访问buttonWidget
# textWidget
说明及示例访问textWidget