weex-ui-demo/packages/i-form-item/README.md

A rich interaction, lightweight, high performance UI library based on Weex

# i-form-item 

> 表单  可用以输入框，单选，下拉框


  
## [Demo](https://h5.m.taobao.com/trip/i-cell/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fi-cell%2Fdemo%2Findex.native-min.js)
<img src="https://img.alicdn.com/tfs/TB1mIA5c5qAXuNjy1XdXXaYcVXa-750-1334.jpg" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB15ta_SpXXXXcFaVXXXXXXXXXX-191-197.png" width="160"/>

## 使用方法

```vue
<template>
  <div class="container">
    <i-form-item :value='test' placeholder='placeholder' @input="oninput"></i-form-item>
  </div>
</template>

<script>
  import { iFormItem } from 'weex-ui';
  export default {
    components: { iFormItem },
    methods: {
      oninput (e) {
        console.log(e)
      }
    }
  };
</script>
```
更详细代码可以参考 [demo](https://github.com/alibaba/weex-ui/blob/master/example/cell/index.vue)


### 可配置参数

| Prop      | Type   |Required  | Default   | Description  |
|-------------|------------|--------|--------|-----|
| formWidth | `String` | `N`|  `690px` |表单宽度 |
| formHeight  | `String` | `N`| `112px` | 表单高度 |
| tipShow | `Bool` | `N`|  `false` |是否显示单选框文本 |
| typeNew  | `String` | `N`| `input`| 表单类型 |
| inputType | `String` | `N`|`text` |  输入框类型 |
| styleEx | `Object` |`N`| `{}` |  表单样式 |
| leftIcon | `String` | `N`| `-` |  左边icon |
| leftText | `String` | `N`| `-` | 左侧文案 |
| rightIcon | `String` | `N`| `-` |  右边icon |
| rightIconSize | `String` | `N`| `35px` |  右边icon大小 |
| rightIconColor | `String` | `N`| `#1E32AA` |  右边icon颜色 |
| rightText | `String` | `N`| `-` |  右侧文案 |
| rightWidth | `String` | `N`| `auto` |  右侧宽度 |
| height | `String` | `N`| `auto` |  输入框高度 |
| placeholder | `String` | `N`| `-` |  表单占位符 |
| value | `String` | `Y`| `-` |  表单值 |
| radioText | `String` | `Y`| `-` |  单选框值 |
| alwaysShow | `Bool` | `N`| `false` |  右侧icon  是否一直展示 |
| placeholderColor | `String` | `N`| `200` |  占位符颜色 |
| closeIcon | `String` | `N`| `icon-flights-cancel-circle` |  输入框清除按钮 |
| closeIconSize | `String` | `N`| `30` |  输入框清除按钮大小|
| closeIconColor | `String` | `N`| `200` |  输入框清除按钮颜色 |
| errColor | `String` | `N`| `#ff7846` |  输入框验证失败颜色 |
| baseColor | `String` | `N`| `#323232` |  输入框基础颜色 |






### 事件回调
```
//获取焦点事件回调  `@focus="focus"`  返回event, 左侧文案, 输入框值
//失去焦点事件回调  `@blur="blur"`  返回event, 左侧文案, 输入框值
//点击右侧事件回调  `@rightClick="rightClick"`  返回event, 左侧文案, 输入框值
//点击表单事件回调  `@textClick="textClick"` 
//点击单选框事件回调  `@selectGender="selectGender"`  返回 单选框值
//点击复选框事件回调  `@selectRadio="selectRadio"`  返回复选框值
//点击右侧事件回调  `@rightClick="rightClick"`  返回event, 左侧文案, 输入框值
//点击表单事件回调  `@textClick="textClick"`  
```