t-mobile-form

0.0.8 • Public • Published

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 -

3. events

事件名 说明 返回值
handleEvent 输入框触发事件 fieldList event 值及/输入框--输入的值

4. Methods

事件名 说明 参数
validateField 单个字段校验 传入rules值
validate 整个表单校验成功返回true -

Package Sidebar

Install

npm i t-mobile-form

Weekly Downloads

42

Version

0.0.8

License

none

Unpacked Size

53.9 kB

Total Files

8

Last publish

Collaborators

  • wocwin