el-vant-form v0.0.23
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显示或隐藏关联表单
```js
{
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](https://www.npmjs.com/package/el-vant-form).
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago