vue-compat-form-editor

vue-compat-form-editor

个性化表单配置 Vue

Get Started 起步

0. Install 安装

$ yarn add vue-compat-form-editor

check that the dependency has been installed. 确认依赖已安装。

$ npx cf-editor --version

# or

$ npx cf-editor --help

1. Eject files 弹出文件

$ npx cf-editor eject <path/to/your/static/folder>

e.g.

$ npx cf-editor eject public

you will find x-editor folder in the public folder. 你将会在 public 目录下找到编译好的 x-editor 文件夹。

2. Import components 导入组件

import { XEditor, XRenderer } from "vue-compat-form-editor";

new Vue({
  components: {
    XEditor,
    XRenderer
  }
});

Then, use in template. 然后再模板中使用

<template>
  <x-editor v-model="config" :url="url" @preview-errors="onPreviewErrors" />
  <x-renderer :config="config" :url="url" />
</template>

XEditor 编辑器

XEditor Attributes 属性

参数	说明	类型	可选值	默认值
url	访问到静态文件 x-editor/editor.html 的路径。其内部实现依靠 <iframe> 标签，是 <iframe> 的 src 属性	string	-	-
v-model	表单配置，随着编辑器不断编辑表单配置，表单配置是动态变化的	object, 具体类型为 FormConfig	-	-

XEditor Events 事件

事件名称	说明	回调参数
preview-errors	编辑器内部有 编辑 和 预览 的切换，当在预览时出现校验错误时，发射此事件	一个包含错误信息的数组，具体类型为 Array<{ name: string, errors: string[] }>

XRenderer 渲染器

XRenderer Attributes 属性

参数	说明	类型	可选值	默认值
url	访问到静态文件 x-editor/renderer.html 的路径。其内部实现依靠 <iframe> 标签，是 <iframe> 的 src 属性	string	-	-
config	表单配置，渲染器会根据这个配置进行表单的渲染工作	object, 具体类型为 FormConfig	-	-

XRenderer Instance Methods 实例方法

方法名	说明	函数类型
submit	外部触发表单验证，同时获取结果 result。表单的值可以通过 result.values 拿到。如果出现校验出现错误，获取的 result.errors 是一个数组，且此时拿不到表单的值，即 result.values === undefined	() => Promise<{ values?: any; errors?: Array<{ path: string; messages: string[] }>; }>
reset	重置表单状态。可选两个参数 forceClear （强制更新） 和 noValidate （为 true 时也会重置表单校验状态至最初状态）。	(forceClear?: boolean, noValidate = false) => Promise<void>