el-vant-form

el-vant-form

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

安装

npm install el-vant-form --save

or

yarn add el-vant-form --save

使用流程

在项目中安装 Render 组件，按照以下方式使用即可

方式一：组件引入

<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 格式的

import elVantForm from 'el-vant-form';

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

插槽

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

校验

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

import { validate } from 'vant-form'

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

表单属性

名称 ：name ：String

    {
        name:"登录名称"
    }

唯一标识 ：id ：String

    {
        id:name
    }

类型 ：type ：String

• input-text ------- 文本输入

• input-textarea ------- 多行文本输入框

• input-radio ------- 单选

• input-picker ------- 下拉选择

• input-number ------- 数字输入

• input-image ------- 上传图片

• input-date ------- 日期

• input-date-time ------- 时间

• input-address ------- 地址选择

• cascader ------- 级联选择器

    {
        type:"input-text"
    }

校验规则 ：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的数

    {
        rules:["notNull"]
    }

输入提示 ：placeholder：String

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

最大日期 ：maxDate：Date

• type是input-date时生效

    {
        type:"input-date",
        maxDate:new Data()
    }

输入提示 ：answer：Array

• type是input-picker时生效

    {
        type:"input-picker",
        answer:[{
            name: "男",
            value: "N"
        },
        {
            name: "女",
            value: "F"
        }]
    }

是否隐藏 ：isHide：Boolean

    {
        isHide:true
    }

关联IDS ：relationsIds：Array

• 根据关联IDS显示或隐藏关联表单

    {
        relationsIds:[name,"password"]
    }

是否自定义表单 ：define：Boolean

    {
        id:"user",
        define:true
    }

    <template>
        <el-vant-form>
            <template slot="user" slot-scope="{formData}">
                <el-input type="text">
            </template>
        </el-vant-form>
    </template>
    

Customize configuration

See Configuration Reference.