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> |