vue-test-form
v1.0.1
Published
基于 element-plus vant 封装的JSON表单系统 自动适配PC端和移动端
Downloads
7
Maintainers
Readme
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>