# Field 输入框

### 介绍

用户可以在文本框内输入或编辑文字。

### 引入

```js
import yCellField from "yesaway-wui/src/components/yCellField";
```

## 代码演示

### 基础用法

可以通过 `v-model` 双向绑定输入框的值，通过 `placeholder` 设置占位提示文字。

```html
<y-cell-group>
    <y-cell-field title="标题" value="文字" placeHolder="描述"></y-cell-field>
</y-cell-group>
```

### 自定义类型

根据 `type` 属性定义不同类型的输入框，默认值为 `text`。
组件类型【`input`:文本输入|`select`:选择值|`mobile`:电话|`vaild`:验证码|`password`:密码】

```html
<y-cell-field title="标题" value="文字" placeHolder="描述" type="input"></y-cell-field>
<y-cell-field title="标题" value="文字" placeHolder="描述" type="select"></y-cell-field>
<y-cell-field title="标题" value="文字" placeHolder="描述" type="mobile"></y-cell-field>
<y-cell-field title="标题" value="文字" placeHolder="描述" type="vaild"></y-cell-field>
<y-cell-field title="标题" value="文字" placeHolder="描述" type="password"></y-cell-field>
```

### 自定义样式

```html
<y-cell-field title="标题" value="文字" placeHolder="描述" type="input"></y-cell-field>
```
按钮样式（参考button）
```html
<y-cell-field title="自定义按钮样式" 
              button-size=""
              button-height=""
              button-plain=""
              button-topic=""
              button-radius=""></y-cell-field>
```


## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 当前输入的值 | _number丨string_ | --- |
| title | 左侧标题 | _number丨string_ | --- |
| value | 右侧内容 | _number丨string_ | --- |
| is-row-single | 是否单行显示 | _boolean_ | --- |
| is-require | 是否必需 | _boolean_ | --- |
| is-link | 是否链接 | _boolean_ | --- |
| auto | 是否自动聚焦 | _boolean_ | --- |
| disabled | 是否禁用 | _boolean_ | --- |
| placeholder | 输入框占位提示文字 | _string_ | --- |
| place-holder | 输入框占位提示文字 | _string_ | --- |
| button-size | 按钮尺寸`large`、`small`、`mini` | _string_ | --- |
| button-height | 是否自动聚焦 | _boolean_ | --- |
| button-plain | 是否自动聚焦 | _boolean_ | --- |
| button-topic | 按钮主题`main`、`gray`、`disabled`、`lightGray`、`black`、`gradient`、 | _string_ | `gradient` |
| button-radius | 按钮圆角`full`、`round`、`little` | _string_ | `little` |

### Events

| 事件名     | 说明                                     | 回调参数            |
| ---------- | ---------------------------------------- | ------------------- |
| change     | 输入框内容变化时触发 | _value: string (当前输入的值)_ |
| focus      | 输入框获得焦点时触发 | _event: Event_ |
| blur       | 输入框失去焦点时触发 | _event: Event_ |
| input      | 点击输入区域时触发   | _event: MouseEvent_ |
| vaild      | 点击按钮时触发      | _event: MouseEvent_ |

### Slots

| 名称           | 说明           |
| -------------- | -------------- |
| default        | 按钮内容        |
| title          | 标题           |
| icon           | 左侧图标        |
| rightIcon      | 右侧图标        |
| button         | 右侧按钮        |