# VInput 组件 API 文档

## 组件简介 | Component Introduction
`VInput` 是基于 Element Plus 的输入框组件，支持多种类型、格式化、校验等功能。

`VInput` is an input component based on Element Plus, supporting multiple types, formatting, and validation features.

---

## Props/属性
| 属性名 | 说明 | 类型 | 是否必填 | 默认值 |
|--------|------|------|----------|--------|
| field  | 输入框配置对象，详见下表 | Object | 是 | - |

### field 对象常用属性 | Common field properties
| 属性名 | 说明 | 类型 | 是否必填 | 默认值 |
|--------|------|------|----------|--------|
| type | 输入类型（如 text, number, integer, tel, ...）| String | 否 | 'text' |
| min | 最小值 | Number | 否 | - |
| max | 最大值 | Number | 否 | - |
| number | 是否强制转为数字 | Boolean | 否 | false |
| onChange | 值变化回调 | Function | 否 | - |
| ... | 其余 Element Plus el-input 支持的属性 | - | - | - |

---

## v-model
- 绑定值类型：`String | Number`
- 用法：`v-model="yourValue"`

---

## 事件 | Events
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| change | 输入值变化时触发 | value（格式化后的值） |

---

## 插槽 | Slots
| 插槽名 | 说明 |
|--------|------|
| prefix | 输入框前缀内容 |
| suffix | 输入框后缀内容 |
| prepend | 输入框前置内容 |
| append | 输入框后置内容 |

---

## 方法 | Methods (通过 ref 调用)
| 方法名 | 说明 |
|--------|------|
| blur() | 使输入框失焦 |
| clear() | 清空输入框内容 |
| focus() | 使输入框聚焦 |
| input | el-input 的 input 实例 |
| ref | el-input 的 ref |
| resizeTextarea() | 调整 textarea 大小（多行输入时）|
| select() | 选中输入框内容 |
| textarea | textarea 实例（多行输入时）|
| textareaStyle | textarea 的样式对象 |

---

## 示例 | Example
```vue
<template>
  <VInput v-model="inputValue" :field="fieldConfig" ref="inputRef">
    <template #prefix>
      <el-icon><Search /></el-icon>
    </template>
    <template #suffix>
      <el-icon><Close /></el-icon>
    </template>
  </VInput>
</template>

<script setup>
import { ref } from 'vue'
import { VInput } from 'your-lib-path'
import { Search, Close } from '@element-plus/icons-vue'

const inputValue = ref('')
const inputRef = ref(null)
const fieldConfig = {
  type: 'text',
  placeholder: '请输入内容',
  clearable: true,
  onChange: (val) => {
    console.log('change', val)
  }
}
</script>
```