# van-form > 基于vant的移动端表单组件封装 Latest version **0.1.6** (published 2022-03-31) · MIT license · 0 weekly downloads ## Install ```sh npm install van-form pnpm add van-form yarn add van-form bun add van-form ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.6 | | Published | 2022-03-31 | | First published | 2022-03-31 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 1.8 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | Milkayh | | Maintainers | honglk | ## Links - npm: https://www.npmjs.com/package/van-form - npm.io page: https://npm.io/package/van-form ## Dependencies (4) - [vue](https://npm.io/package/vue.md) ^2.6.14 - [vant](https://npm.io/package/vant.md) ^2.12.30 - [core-js](https://npm.io/package/core-js.md) ^3.8.3 - [@xuanmo/datejs](https://npm.io/package/@xuanmo/datejs.md) ^1.0.7 ## Recent versions - 0.1.6 (latest) — 2022-03-31 - 0.1.5 — 2022-03-31 - 0.1.4 — 2022-03-31 - 0.1.3 — 2022-03-31 - 0.1.2 — 2022-03-31 - 0.1.1 — 2022-03-31 - 2.1.0 — 2022-03-31 - 0.1.0 — 2022-03-31 ## README # van-form 初次尝试封装组件，可能很多地方没有考虑全面，功能使用可能没有那么舒服，请见谅！ ### 表单添加方法 - html ```html ``` ## props | 字段名 | 说明 | 类型 | 默认值 | | -------------- | ------------------------------- | ------ | ------ | | v-model(value) | 获取组件处理完成的数据 | object | {} | | model | 数据模型(具体类型参考后续文档) | object | {} | | isSetItem | 表单项之间是否有间距 ｜ Boolean | false | ## events | 事件名 | 说明 | 回调参数 | | ------ | ------------------------ | ------------------------------ | | change | 数据更改时触发 | object{value,errorMsg,isValid} | | event | 数据发生改变所发送的事件 | object{event,formModel} | ## 组件发生 change 事件返回的数据 ```json { "value": {}, // 所有的数据经过处理后会以一个对象存放在这个字段 "errorMsg": [], // 所有的校验失败的错误信息集合 "isValid": false // 是否有通过所有的校验标识 } ``` ## model 数据格式 | 字段名 | 说明 | 类型 | 默认值 | 可选值 | | :------------- | :--------------------------------------------------------------------------------- | :----------- | :-----: | :-------------------------------------------------------------------------------------: | | title | 多个表单模块存在时，单个模块的 title | String | ' ' | | | ref | 单个模块的 ref | String | ' ' | | | items | 单个模块内具体的表单项 | Array | [] | | | type | 表单项类型 | String | ‘’ | VInput/VCheckbox/VRadio/VSelect/VAction/VDatePicker/VSwitch/VRate/VCell/VCascader/Scope | | show | 控制是否显示该项,非必填,默认显示,不写默认为 true | Boolean | true | | | disabled | 控制是否禁用表单项 ,非必填 默认不禁用,不写默认为 false | Boolean | false | | | subType | 输入框或时间组件时，具体类型的选项值 | String | ' ' | date time year-month month-day textarea,password,tel,digit,number | | prop | 表单项绑定的属性 | String | ' ' | | | value | 表单项绑定的属性的值 | String/Array | ' '/[] | | | width | 控制 label 的宽度 | String | ' ' | 数字+px | | placeholder | 表单项的提示文字 | String | ‘ ’ | | | validate | 表单项验证规则,自定义时如果需要添加验证，也必须有这个属性,不需要验证时不填这个属性 | Object | {} | | | validate.text | 表单验证未通过时的提示文字 | String | ' ' | | | validate.type | 该表单项是否为必填项,type 值为 required 时为必填 | String | ' ' | | | validate.rules | 表单项验证规则，返回结果为是否通过验证的 true 和 false | Function | ()=>{ } | | > 以下是一个简单的数据格式，生成一个输入框，详细使用见目录 example ### 注意事项 type 为 scope 时，验证添加同其他类型一致，需要有 prop 和 value 属性 ### 实例 - js ```js const model = [ { title: '建筑物基本信息', ref: 'base', items: [ { type: 'scope', show： true, scope: ()=>{ return html } }, { label: '建筑物名称', type: 'VInput', show： true, prop: 'buildingName', value: '', placeholder: '请输入建筑物名称', disabled: false, validate: { text: '请输入建筑物名称', type: 'required' } }, { label: '建筑物地址', type: 'VInput', show： true, subType: 'textarea', prop: 'buildingAddress', value: '', placeholder: '请输入建筑物地址', disabled: false, validate: { text: '请输入建筑物地址', type: 'required' // rules: this.validateStrongPassword } }, { label: '复选框', type: 'VCheckbox', show： true, placeholder: '请输入复选框', direction: 'horizontal', disabled: false, value: [], options: [ { label: '复选框 a', value: 'a' }, { label: '复选框 b', value: 'b' }, { label: '复选框 c', value: 'c' } ], validate: { text: '请输入复选框', type: 'required' } }, { label: '是否拆除', type: 'VSwitch', show： true, prop: 'isbuilding', value: true, disabled: false, validate: { text: '请确认是否拆除', type: 'required' } }, { label: '建设时间', type: 'VDatePicker', show： true, subType: 'datetime', prop: 'buildingtime', value: '', title: '选择年月日', placeholder: '请选择建设时间', disabled: false, validate: { text: '请选择建设时间', type: 'required' } }, { label: '评分星级', type: 'VRate', show： true, prop: 'rate', value: 0, placeholder: '请选择评分星级', disabled: false, size: 30, count: 7, color: '#ff0000', voidColor: '#00ff00', validate: { text: '请选择评分星级', type: 'required' } } ] }, { title: '建筑公司基本信息', ref: 'companyBase', items: [ { label: '建筑公司名称', type: 'VSelect', show： true, prop: 'buildingCompanyName', value: '', width: '120px', placeholder: '请输入建筑公司名称', disabled: false, options: [ { text: '杭州', value: 1 }, { text: '宁波', value: 2 }, { text: '温州', value: 3 }, { text: '嘉兴', value: 4 }, { text: '湖州', value: 5 } ], validate: { text: '请输入建筑公司名称', type: 'required' } }, { label: "事件等级", type: "VAction", show： true, prop: "level", value: "", placeholder: "请选择事件等级", disabled: false, options: [ { name: "特级", value: "2" }, { name: "紧急", value: "1" }, { name: "一般", value: "0" } ], validate: { text: "请选择事件等级", type: "required" } } { label: '单选框', type: 'VRadio', show： true, prop: 'buildingCompanyAddress', value: '', width: '120px', placeholder: '请选择单选框', disabled: false, direction: 'horizontal', options: [ { label: '复选框 a', value: 'a' }, { label: '复选框 b', value: 'b' }, { label: '复选框 c', value: 'c' } ], validate: { text: '请选择单选框', type: 'required' } } ] } ] ``` --- _Source: https://npm.io/package/van-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._