# el-vant-form

基于 element-plus vant 封装的JSON表单系统 自动适配PC端和移动端

[![npm](https://img.shields.io/npm/v/vue-class-component.svg)](https://www.npmjs.com/package/vue-class-component) [![node](https://img.shields.io/node/v/koa)](https://www.npmjs.com/package/vue-class-component) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitee.com/z_web/el-vant-form) 


## **安装**
```
npm install el-vant-form --save

or

yarn add el-vant-form --save
```
#

## **使用流程**
####   在项目中安装 Render 组件，按照以下方式使用即可
<br>

>  方式一：组件引入
```vue 
<template>
  <el-vant-form 
    :data='formData' 
    :onSubmit="onSubmit"
  />
</template>
<script>
import elVantForm from 'el-vant-form';
import {reactive} from "vue";
export default {
  components:{elVantForm},
  setup () {
    const formData = reactive([{
        name: "登录名",
        id: "name",
        type: "input-text",
        rule: "notNull",
        placeholder: "请输入登录名"
    }, {
        name: "密码",
        id: "password",
        rule: "notNull",
        type: "input-password",
        placeholder: "请输入密码"
    }])
    return {
      // formData 必须是响应式的 
      formData,
      onSubmit (data) {
        return new Promise((resolve) => {
            // do...
            resolve(data)
        })
      }
    } 
  }
}
</script>
```
> 方式二：全局引入

- 因为组件包是 umd 格式的

```js
import elVantForm from 'el-vant-form';

const app = createApp(App);
app.use(elVantForm).$mount('#app');
```

## **插槽**

提交按钮不是必须的，可以通过默认插槽来覆盖

#

## **校验**

默认的提交按钮做了校验操作，如果是自行覆盖提交，需要调用校验函数。

```js
import { validate } from 'vant-form'

const valid = validate(schema, data) // boolean

```
#
## **表单属性**
> 名称 ：`name` ：String
```js
    {
        name:"登录名称"
    }
```

> 唯一标识 ：`id` ：String

```js
    {
        id:name
    }
```

> 类型 ：`type` ：String

* `input-text` -------  *文本输入* 

* `input-textarea` -------  *多行文本输入框*  

* `input-radio` -------  *单选*    

* `input-picker` -------  *下拉选择*  

* `input-number` -------  *数字输入*  

* `input-image` -------  *上传图片* 

* `input-date` -------  *日期*  

* `input-date-time` -------  *时间*  

* `input-address` -------  *地址选择*  

* `cascader` -------  *级联选择器*  

> 校验规则 ：`rules` ：Array

* `notNull` -------  *不能为空* 

* `phone` -------  *手机号码*  

* `email` -------  *邮箱*    

* `number` -------  *数字*  

* `password` -------  *密码*  

* `number4` -------  *4位数字* 

* `number11` -------  *11位数字*  

* `idCardLastFour` -------  *身份证后4位*  

* `float` -------  *浮点*  

* `int` -------  *整形*  

* `float` -------  *浮点* 

* `http` -------  *请求协议* 

* `(0-+∞)` -------  *大于0的数*  

* `[1-1e5]` -------  *大于等于1且小于等于10000的数* 

* `[1-+10]` -------  *大于等于1且小于等于10的数*  

* `[1-+12]` -------  *大于等于1且小于等于12的数*  

* `[1-+5]` -------  *大于等于1且小于等于5的数*  

* `[0-10]` -------  *大于等于0且小于等于10的数*  

* `[0-1]` -------  *0到1的数*  

* `(0-1)` -------  *0到1的数*  

* `(0-+∞)` -------  *大于0的数*  

* `[1-+∞)` -------  *大于或等于1的数*  

* `[0.5-1]` -------  *大于或等于0.5小于或等于1的数*  

* `[0-+∞)` -------  *大于或等于0的数*  

* `[2-+∞)` -------  *大于或等于2的数*  

* `[-1-+∞)` -------  *大于或等于-1的数*  

* `(0-0.5)` -------  *大于0小于0.5的数*  

* `[1e-5-1e5]` -------  *大于等于0.00001小于等于100000的数*

```js
    {
        rules:["notNull"]
    }
```

> 输入提示 ：`placeholder`：String

```js
    {
        type:"input-text",
        placeholder:"请输入"
    }
```

> 最大日期 ：`maxDate`：Date

* **type**是`input-date`时生效
```js
    {
        type:"input-date",
        maxDate:new Data()
    }
```
> 输入提示 ：`answer`：Array
* **type**是`input-picker`时生效
```js
    {
        type:"input-picker",
        answer:[{
            name: "男",
            value: "N"
        },
        {
            name: "女",
            value: "F"
        }]
    }
```
> 是否隐藏 ：`isHide`：Boolean
```js
    {
        isHide:true
    }

```
> 关联IDS ：`relationsIds`：Array
* 根据关联IDS显示或隐藏关联表单
```js
    {
        relationsIds:[name,"password"]
    }
```
> 是否自定义表单 ：`define`：Boolean
```js
    {
        id:"user",
        define:true
    }
```
```vue
    <template>
        <el-vant-form>
            <template slot="user" slot-scope="{formData}">
                <el-input type="text">
            </template>
        </el-vant-form>
    </template>
    
```
### Customize configuration
See [Configuration Reference](https://www.npmjs.com/package/el-vant-form).