# weui_form_demo

**Repository Path**: fanhangcheng/weui_form_demo

## Basic Information

- **Project Name**: weui_form_demo
- **Description**: 封装基于weui的form组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-06-18
- **Last Updated**: 2023-04-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div id="content_views" class="markdown_views prism-atelier-sulphurpool-light">
# 封装WeUI Form组件




## 参数说明


<div class="table-box"><table><thead><tr><th>属性</th><th>描述</th><th>默认值</th><th>必需</th></tr></thead><tbody><tr><td>formData</td><td>表单绑定数据，用于初始化</td><td>{}</td><td>是</td></tr><tr><td>options</td><td>表单配置</td><td>[]</td><td>是</td></tr><tr><td>rules</td><td>表单验证规则</td><td>[]</td><td>否</td></tr><tr><td>title</td><td>卡片标题</td><td>“”</td><td>否</td></tr></tbody></table></div>

 

## options


<div class="table-box"><table><thead><tr><th>属性</th><th>描述</th><th>必需</th></tr></thead><tbody><tr><td>title</td><td>表单表头</td><td>是</td></tr><tr><td>key</td><td>表单对应的字段</td><td>是</td></tr><tr><td>type</td><td>控件类型</td><td>是</td></tr><tr><td>rules</td><td>是否开启验证</td><td>否</td></tr><tr><td>option</td><td>表单配置</td><td>否</td></tr><tr><td>disabled</td><td>禁用</td><td>否</td></tr><tr><td>slot</td><td>开启自定义控件</td><td>否</td></tr></tbody></table></div>
<blockquote> 
 <p>如果开启了 <code>slot</code> ，一定要指定好 <code>slot="需要自定义的字段"</code></p> 
</blockquote> 


 ## type


<div class="table-box"><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>selector</td><td>选择框</td></tr><tr><td>text</td><td>文本输入框</td></tr><tr><td>textarea</td><td>文本域</td></tr><tr><td>number</td><td>数字</td></tr><tr><td>idcard</td><td>身份证</td></tr><tr><td>digit</td><td>小数点</td></tr><tr><td>password</td><td>密码</td></tr><tr><td>switch</td><td>开关</td></tr><tr><td>date</td><td>日期</td></tr><tr><td>time</td><td>时间</td></tr><tr><td>region</td><td>地区选择</td></tr><tr><td>file</td><td>图片上传</td></tr></tbody></table></div>

 ## option

<blockquote> 
 <p>只有在<code>type</code>为<code>[selector]</code>时才需要设置</p> 
</blockquote> 
<div class="table-box"><table><thead><tr><th>属性</th><th>描述</th><th>必需</th></tr></thead><tbody><tr><td>data</td><td>数据源</td><td>是</td></tr><tr><td>props</td><td>配置</td><td>是</td></tr></tbody></table></div>



## props


<blockquote> 
 <p>如果是普通选择框无需设置</p> 
</blockquote> 
<div class="table-box"><table><thead><tr><th>属性</th><th>描述</th><th>必需</th></tr></thead><tbody><tr><td>Key</td><td>指定对象选择框的显示字段</td><td>是</td></tr></tbody></table></div>



## 方法


<div class="table-box"><table><thead><tr><th>属性</th><th>描述</th><th>回调函数</th></tr></thead><tbody><tr><td>validate()</td><td>表单验证</td><td>isValidate</td></tr></tbody></table></div>



## 示例代码





### index.json

```json
{
 
    "navigationBarBackgroundColor": "#3b4994",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "测试页面",
    "usingComponents": {
      "my-form": "/components/Form/sform",
      "mp-icon": "weui-miniprogram/icon/icon"
    }
}
```





### index.wxml

```html
<view class="main">
  <my-form id="my-form" rules="{{myFormData.rules}}" formData="{{myFormData.formData}}" options="{{myFormData.options}}"
    title="这是标题">
      <view class="slot-box" slot="test_slot">
        <input class="inp1" type="text" placeholder="1级: 单穗稻曲病球病粒数1"/>
        <input class="inp2" type="text"/>
        <mp-icon icon="add2" color="black" size="{{25}}"></mp-icon>
      </view>
      <view class="slot-box2" slot="test_slot">
        <text>其他备注:</text>
        <textarea name="" id="" cols="30" rows="10"></textarea>
      </view>
    </my-form>
  <view class="weui-btn-area">
    <button class="weui-btn" type="primary" bindtap="submitForm">立刻创建</button>
  </view>
</view>

```

### index.js

```js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    myFormData: {
      formData: {
        1: "",
        2: "",
        3: "",
        4: "",
        5: "",
        test_slot: "",
        test_area:""
      },
      options: [{
          title: "调查总穴数",
          key: "1",
          type: "selector",
          rules: true,
          option: {
            data: [{
                id: 1,
                name: "选项1"
              },
              {
                id: 2,
                name: "选项2"
              },
              {
                id: 3,
                name: "选项3"
              },
              {
                id: 4,
                name: "选项4"
              }
            ],
            props: {
              key: "name"
            }
          }
        },
        {
          title: "调查总株数",
          key: "2",
          type: "selector",
          rules: true,
          option: {
            data: ["选项1", "选项2", "选项3"]
          }
        },
        {
          title: "调查总穗数",
          key: "3",
          type: "text",
          rules: true
        },
        {
          title: "活虫数",
          key: "4",
          type: "textarea",
          rules: true
        },
        {
          title: "数字",
          key: "5",
          type: "number",
          rules: true
        },
        {
          title:"",
          key: "test_slot",
          slot: true
        },
        {
          title:"",
          key: "test_area",
          slot: true
        }
      ],
      rules: []
    },
  },

  // 提交表单
  submitForm() {
    // 获取组件对象
    const myForm = this.selectComponent("#my-form");
    // 调用验证方法
    if (myForm.validate()) {
      console.log(myForm.data.formData);
    }
  }
})
```

### index.wxss

```css
.main {
  padding: 5vh 0;
}

#my-form input {
  border:1rpx solid red;
  padding-left: 10rpx
}

.slot-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.inp1 {
  width: 400rpx;
  font-size: 14px;
  border-radius: 20rpx;
  border-color:#bbb !important;
}
.inp2 {
  width: 150rpx;
}
.slot-box2 {
  margin-top: 50rpx;
  display: flex;
  justify-content: space-between;
}
.slot-box2 text {
  width: 300rpx;
}

.slot-box2 textarea {
  width: 100%;
  border:1px solid #bbb
}

```