https://github.com/wocwin/t-mobile-form
mpvue基于vant-weapp-ui二次封装微信小程序表单组件
https://github.com/wocwin/t-mobile-form
form mpvue vant-ui vant-weapp weixin-xiaochengxu
Last synced: 7 months ago
JSON representation
mpvue基于vant-weapp-ui二次封装微信小程序表单组件
- Host: GitHub
- URL: https://github.com/wocwin/t-mobile-form
- Owner: wocwin
- License: apache-2.0
- Created: 2023-07-13T09:32:33.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-07-13T11:12:52.000Z (over 2 years ago)
- Last Synced: 2025-02-25T00:45:38.580Z (8 months ago)
- Topics: form, mpvue, vant-ui, vant-weapp, weixin-xiaochengxu
- Language: Vue
- Homepage:
- Size: 790 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# t-mobile-form
> mpvue 中基于vant-weapp-ui二次封装微信小程序表单组件(t-mobile-form)
# 安装依赖
```
npm install
```
# 本地运行
```
npm run serve
```
# 微信运行
```
第一步：打开微信开发者工具
第二步：运行npm run serve后会生成一个dist文件夹，用微信开发者工具导入dist/wx即可预览
```
# npm 方式安装使用
```js
// 先安装
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 表单组件
**代码示例：**
```html
```
## 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 | - |