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------- 级联选择器
校验规则 ：
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>