T-mobile-form NPM

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) // TMobileForm

TMobileForm 参数配置

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	-