{"id":21314370,"url":"https://github.com/wocwin/t-mobile-form","last_synced_at":"2026-01-02T21:51:24.499Z","repository":{"id":188469550,"uuid":"665916128","full_name":"wocwin/t-mobile-form","owner":"wocwin","description":"mpvue基于vant-weapp-ui二次封装微信小程序表单组件","archived":false,"fork":false,"pushed_at":"2023-07-13T11:12:52.000Z","size":809,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-25T00:45:38.580Z","etag":null,"topics":["form","mpvue","vant-ui","vant-weapp","weixin-xiaochengxu"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wocwin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-13T09:32:33.000Z","updated_at":"2024-10-22T00:32:46.000Z","dependencies_parsed_at":"2023-08-15T14:06:24.781Z","dependency_job_id":null,"html_url":"https://github.com/wocwin/t-mobile-form","commit_stats":null,"previous_names":["wocwin/t-mobile-form"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wocwin%2Ft-mobile-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wocwin%2Ft-mobile-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wocwin%2Ft-mobile-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wocwin%2Ft-mobile-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wocwin","download_url":"https://codeload.github.com/wocwin/t-mobile-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243790999,"owners_count":20348385,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","mpvue","vant-ui","vant-weapp","weixin-xiaochengxu"],"created_at":"2024-11-21T18:12:34.904Z","updated_at":"2026-01-02T21:51:24.464Z","avatar_url":"https://github.com/wocwin.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# t-mobile-form\n\n\u003e mpvue 中基于vant-weapp-ui二次封装微信小程序表单组件(t-mobile-form)\n\n# 安装依赖\n\n```\nnpm install\n```\n\n# 本地运行\n\n```\nnpm run serve\n```\n\n# 微信运行\n```\n第一步：打开微信开发者工具\n第二步：运行npm run serve后会生成一个dist文件夹，用微信开发者工具导入dist/wx即可预览\n```\n\n# npm 方式安装使用\n```js\n// 先安装\nnpm i t-mobile-form\n// 在main.js中按下引入(全局使用)\nimport TMobileForm from 't-mobile-form/packages/form/src/index.vue'\nVue.component('TMobileForm', TMobileForm) // TMobileForm\n\n```\n# TMobileForm 参数配置\n\n## 1. 简介：基于 vant-weapp 组件的二次封装，着重于数据层面，HTML 一行代码\n\nTMobileForm 表单组件\n**代码示例：**\n\n```html\n\u003ct-mobile-form\n  ref=\"t-form\"\n  :formOpts=\"formOpts\"\n  :listDefaultInfo=\"formOpts.listDefaultInfo\"\n  :listTypeInfo=\"formOpts.listTypeInfo\"\n  /\u003e\n```\n\n## 2. 配置参数\n\n| 参数                | 说明                                                                  | 类型        | 默认值 |\n| :------------------ | :-------------------------------------------------------------------- | :---------- | :----- |\n| className           | 自定义类名                                                            | String      | -      |\n| listTypeInfo        | 下拉选择数据源（type:'date/datetime/radio/checkbox'有效）             | Object      | {}     |\n| listDefaultInfo     | 下拉选择默认值及弹窗字段（type:'date/datetime/radio/checkbox'有效）   | Object      | {}     |\n| formOpts            | 表单配置项                                                            | Object      | {}     |\n| ---fieldList        | form 表单每项 list (输入框继承van-field)                              | Array       | []     |\n| ------slotName      | 自定义表单某一项输入框                                                | String/slot | -      |\n| ------event         | type非date/datetime/radio/checkbox有效                                | String      | -      |\n| ------type          | date/datetime/radio/checkbox/text/password/textarea                   | String      | -      |\n| ------label         | form 表单每一项 title                                                 | String      | -      |\n| ------slotLabelName | 自定义某一项 title                                                    | String/slot | -      |\n| ------slotRightIcon | van-field右侧icon                                                     | Object      | -      |\n| ----------name      | icon 名称                                                             | String      | -      |\n| ----------fun       | 点击icon事件                                                          | funciton    | -      |\n| ----------color     | icon颜色                                                              | String      | -      |\n| ------slotButton    | van-field右侧按钮                                                     | Object      | -      |\n| ----------name      | 插槽名                                                                | String      | -      |\n| ----------fun       | 点击按钮事件                                                          | funciton    | -      |\n| ----------type      | 继承van-button type                                                   | String      | -      |\n| ----------size      | 继承van-button size                                                   | String      | -      |\n| ------value         | form 表单每一项传给后台的参数（对应formData每一项）                   | String      | -      |\n| ------required      | 是否显示红点                                                          | Boolean     | false  |\n| ------list          | 下拉选择数据源（仅仅对 type:'date/datetime/radio/checkbox'有效）      | String      | -      |\n| ------defaultValue  | 表单下拉选择回显界面值（type:'date/datetime/radio/checkbox'有效）     | String      | -      |\n| ------defaultPopup  | 表单下拉选择弹窗字段值（type:'date/datetime/radio/checkbox'有效）     | String      | -      |\n| ---formData         | 表单提交数据(对应 fieldList 每一项的 value 值)                        | Object      | -      |\n| ---rules            | 三种规则校验（required(是否必填)/min：max(最小最大)/pattern(正则校验) | Object      | -      |\n\n## 3. events\n\n| 事件名      | 说明           | 返回值                                |\n| :---------- | :------------- | :------------------------------------ |\n| handleEvent | 输入框触发事件 | fieldList event 值及/输入框--输入的值 |\n\n## 4. Methods\n\n| 事件名        | 说明                     | 参数        |\n| :------------ | :----------------------- | :---------- |\n| validateField | 单个字段校验             | 传入rules值 |\n| validate      | 整个表单校验成功返回true | -           |\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwocwin%2Ft-mobile-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwocwin%2Ft-mobile-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwocwin%2Ft-mobile-form/lists"}