# vue3-json-schema-form

**Repository Path**: southWindNumber/vue3-json-schema-form

## Basic Information

- **Project Name**: vue3-json-schema-form
- **Description**: vue3+ts组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-28
- **Last Updated**: 2023-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-json-schema-form

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Run your unit tests

```
npm run test:unit
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

.prettierrc 配置

```js
{
  "semi": false,//分号
  "singleQuote": true,//单引号
  "arrowParens": "always",//匿名函数一个参数括号
}
```

使用 jsx

```js
// 安装
npm i @vue/babel-plugin-jsx -D
// babel.config.js 配置
plugins: ["@vue/babel-plugin-jsx"],
```

使用 avj json-schema

```js
// 官网 https://ajv.js.org
// 安装
npm i ajv@6.12.4 -S

// 国际化
npm i ajv-i18n -S
// 错误自定义
npm i ajv-errors@1.0.1
```

# API 设计

```jsx
<JsonSchemaForm>
  schema={schema}
  value={value}
  onChange={handleChange}
  locale={locale}
  contextRef={someRef}
  uiSchema={uiSchema}
/>
```

### schema

json schema 对象，用来定义数据，同时也是我们定义表单的依据

### value

表单的数据结果，你可以从外部改变这个 value ,在表单被编辑的时候，会通过`onChange`透出 value

需要注意的是 因为 vue 使用的是可变数据 如果每次数据变化我们都去改变 `value` 的对象地址 那么会导致整个表单都需要
重新渲染，这会导致性能降低
从实践中来看，我们传入的对象，在内部修改其 filed 的值基本不会有什么副作用，所以我们会使用这种方式来进行实现。也
就是说。如果 `value` 是一个对象
那么`JsonSchemaForm`内部修改的值，并不会改变`value`对象本身。我们仍然会触发`oChange`,因为可能在表单触发之后
使用者需要进行一些操作

### onChange

在表单值有任何变化的时候触发该回调方法，并把新的值进行返回

### local

语言，使用`ajv-i18n`指定错误信息使用的语言

### contextRef

你需要传入一个 vue3 的`Ref`对象，我们会在这个对象上挂载`doValidate`方法，你可以通过

```ts
const yourRef=ref({})

onMounted(()=>{
  yourRef.value.doValidate()
})

<JsonSchemaForm contextRef={yourRef}/>
```

这样来主动让表单进行校验

### uiSchema

对表单的展现进行一些定制，其类型如下

```ts
export interface VueJsonScheamConfig {
  title?: string;
  descrription?: string;
  component?: string;
  additionProps?: {
    [key: string]: any;
  };
  withFormItem?: boolean;
  widget?: "checkbox" | "textarea" | "select" | "radio" | "range" | string;
  items?: UISchema | UISchema[];
}

export interface UISchema extends VueJsonSchemaConfig {
  properties?: {
    [property: string]: UISchema;
  };
}
```

## 提醒是否有循环引用的包

```js
npm i circular-dependency-plugin -D
```

## jest 官网

```js
https://jestjs.io/docs/expect
```