t-mobile-form
mpvue 中基于vant-weapp-ui二次封装微信小程序表单组件(t-mobile-form)
安装依赖
npm install
本地运行
npm run serve
微信运行
第一步：打开微信开发者工具
第二步：运行npm run serve后会生成一个dist文件夹，用微信开发者工具导入dist/wx即可预览
npm 方式安装使用
// 先安装
npm i t-mobile-form
// 在main.js中按下引入(全局使用)
import TMobileForm from 't-mobile-form/packages/form/src/index.vue'
Vue.component('TMobileForm', TMobileForm) // TMobileFormTMobileForm 参数配置
1. 简介：基于 vant-weapp 组件的二次封装，着重于数据层面，HTML 一行代码
TMobileForm 表单组件 代码示例：
<t-mobile-form
ref="t-form"
:formOpts="formOpts"
:listDefaultInfo="formOpts.listDefaultInfo"
:listTypeInfo="formOpts.listTypeInfo"
/>2. 配置参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| className | 自定义类名 | String | - |
| listTypeInfo | 下拉选择数据源（type:'date/datetime/radio/checkbox'有效） | Object | {} |
| listDefaultInfo | 下拉选择默认值及弹窗字段（type:'date/datetime/radio/checkbox'有效） | Object | {} |
| formOpts | 表单配置项 | Object | {} |
| ---fieldList | form 表单每项 list (输入框继承van-field) | Array | [] |
| ------slotName | 自定义表单某一项输入框 | String/slot | - |
| ------event | type非date/datetime/radio/checkbox有效 | String | - |
| ------type | date/datetime/radio/checkbox/text/password/textarea | String | - |
| ------label | form 表单每一项 title | String | - |
| ------slotLabelName | 自定义某一项 title | String/slot | - |
| ------slotRightIcon | van-field右侧icon | Object | - |
| ----------name | icon 名称 | String | - |
| ----------fun | 点击icon事件 | funciton | - |
| ----------color | icon颜色 | String | - |
| ------slotButton | van-field右侧按钮 | Object | - |
| ----------name | 插槽名 | String | - |
| ----------fun | 点击按钮事件 | funciton | - |
| ----------type | 继承van-button type | String | - |
| ----------size | 继承van-button size | String | - |
| ------value | form 表单每一项传给后台的参数（对应formData每一项） | String | - |
| ------required | 是否显示红点 | Boolean | false |
| ------list | 下拉选择数据源（仅仅对 type:'date/datetime/radio/checkbox'有效） | String | - |
| ------defaultValue | 表单下拉选择回显界面值（type:'date/datetime/radio/checkbox'有效） | String | - |
| ------defaultPopup | 表单下拉选择弹窗字段值（type:'date/datetime/radio/checkbox'有效） | String | - |
| ---formData | 表单提交数据(对应 fieldList 每一项的 value 值) | Object | - |
| ---rules | 三种规则校验（required(是否必填)/min：max(最小最大)/pattern(正则校验) | Object | - |
3. events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| handleEvent | 输入框触发事件 | fieldList event 值及/输入框--输入的值 |
4. Methods
| 事件名 | 说明 | 参数 |
|---|---|---|
| validateField | 单个字段校验 | 传入rules值 |
| validate | 整个表单校验成功返回true | - |