# HorField


### 介绍

field组件支持全部的cell和input的全部属性，和插槽


## 代码演示


### 基础用法

```html
<hor-field
  v-for="(item, key) in objForm"
  :key="key"
  v-bind="item"
  clearable
  v-model="item.value"
/>
<hor-field label="验证码" placeholder="请输入验证码" v-model="code">
  <template #suffix>
    <van-button size="mini" type="primary">发送验证码</van-button>
  </template>
</hor-field>
<dd v-for="(item, key) in objForm" :key="key">{{ item.label }}: {{ item.value }}</dd>
<script setup lang="ts">
  const objForm = reactive({
    name: {
      label: '姓名',
      value: '',
      placeholder: '请填写姓名',
    },
    age: {
      label: '年龄',
      value: '',
      placeholder: '请填写年龄',
      type: 'number',
      maxlength: 3,
    },
    price: {
      label: '小数',
      value: '',
      placeholder: '请填写价格',
      type: 'digit',
      fractionDigits: '2',
    },
  })
  const code = ref()
</script>
```

## API

### 属性 Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horFieldProps" :key="key">
    <td>{{ key }}</td>
    <td>{{ parseType(item.type || item) }}</td>
    <td>{{ reserve(item.default, '-') }}</td>
  </tr>
</table>

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>

### 插槽 Slots

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>


### 实例方法

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>



<script setup lang="ts">
  import { reserve } from '@daysnap/utils'
  import { HorCell } from '../hor-cell'
  import { HorField, horFieldProps } from '.'
  import { parseType } from '../utils'
</script>