# t-mobile-form

**Repository Path**: wocwin/t-mobile-form

## Basic Information

- **Project Name**: t-mobile-form
- **Description**: mpvue 中基于vant-weapp-ui二次封装微信小程序表单组件
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2023-07-13
- **Last Updated**: 2024-08-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: mpvue, vant-weapp, 微信小程序, 表单组件, 小程序表单组件

## 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
<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 | -           |