# vue-compat-form-editor

> 个性化表单配置 `Vue`

Latest version **1.1.3** (published 2019-12-30) · 0 weekly downloads

## Install

```sh
npm install vue-compat-form-editor
pnpm add vue-compat-form-editor
yarn add vue-compat-form-editor
bun add vue-compat-form-editor
```

Provides the command `cf-editor`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2019-12-30 |
| First published | 2019-11-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | heskey |

## Links

- npm: https://www.npmjs.com/package/vue-compat-form-editor
- npm.io page: https://npm.io/package/vue-compat-form-editor

## Dependencies (4)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [fs-extra](https://npm.io/package/fs-extra.md) ^8.1.0
- [commander](https://npm.io/package/commander.md) ^4.0.1
- [lodash-decorators](https://npm.io/package/lodash-decorators.md) ^6.0.1

## Recent versions

- 1.1.3 (latest) — 2019-12-30
- 1.1.2 — 2019-12-26
- 1.1.0 — 2019-12-25
- 1.0.0-alpha.0 — 2019-12-16
- 0.0.2-alpha.3 — 2019-12-16
- 0.0.2-alpha.2 — 2019-12-16
- 0.0.2-alpha.1 — 2019-12-15
- 0.0.2-alpha.0 — 2019-12-15
- 0.0.1-alpha.10 — 2019-12-10
- 0.0.1-alpha.9 — 2019-12-09
- 0.0.1-alpha.8 — 2019-12-08
- 0.0.1-alpha.7 — 2019-12-08
- 0.0.1-alpha.6 — 2019-12-07
- 0.0.1-alpha.5 — 2019-12-04
- 0.0.1-alpha.4 — 2019-12-02
- … 3 more at https://npm.io/package/vue-compat-form-editor/versions

## README

# vue-compat-form-editor

个性化表单配置 `Vue`

## Get Started 起步

### 0. Install 安装

```bash
$ yarn add vue-compat-form-editor
```

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

```bash
$ npx cf-editor --version

# or

$ npx cf-editor --help
```

### 1. Eject files 弹出文件

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

e.g.

```bash
$ npx cf-editor eject public
```

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

### 2. Import components 导入组件

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

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

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

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

---
_Source: https://npm.io/package/vue-compat-form-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._