@daysnap/horn-ui/src/hor-input/README.md

hron ui

# HorInput


### 介绍

一个包含基础功能的input组件，可单独使用,也可搭配cell使用,如果需要集成度高的输入框组件请查看field

## 代码演示

### 基础用法

```html
<hor-cell label="支持数字">
  <hor-input type="number" placeholder="请输入" />
</hor-cell>
<hor-cell label="手机号">
  <hor-input type="number" maxlength="11" placeholder="请输入手机号" />
</hor-cell>
<hor-cell label="小数">
  <hor-input type="digit" fractionDigits="4" placeholder="请输入" />
</hor-cell>
<hor-cell label="密码">
  <hor-input type="password" placeholder="请输入密码" />
</hor-cell>
<hor-cell label="禁用">
  <hor-input disabled type="digit" fractionDigits="4" placeholder="请输入" />
</hor-cell>
```

### 自定义操作value

```html
<hor-cell label="支持正则">
  <hor-input :pattern="/(哈)/g" placeholder="请输入" />
</hor-cell>
<hor-cell label="支持函数">
  <hor-input :pattern="handlePattern" placeholder="请输入" />
</hor-cell>
<script setup lang="ts">
  function handlePattern(val) {
    return val + '函数'
  }
</script>
```

## API

### 属性 Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horInputProps" :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 { HorInput, horInputProps } from '.'
  import { parseType } from '../utils'
</script>