Vue-compat-form-editor NPM

vue-compat-form-editor

个性化表单配置 Vue

$ yarn add vue-compat-form-editor

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

$ npx cf-editor --version

# or

$ npx cf-editor --help

$ 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 文件夹。

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>

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

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

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

方法名	说明	函数类型
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>`