# EpInput 输入框

基于 el-input 封装，增加数字格式化等功能。

## 基本用法

```vue
<template>
  <EpInput v-model="value" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
</script>
```

## Props

| 属性 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| v-model | 绑定值 ^el^ | `string \| number` | - |
| placeholder | 占位文本 ^el^ | `string` | '请输入' |
| clearable | 是否可清空 ^el^ | `boolean` | `true` |
| max | 最大值（数字模式） | `number` | - |
| min | 最小值（数字模式） | `number` | - |
| radix | 小数位数 | `number` | - |
| nonzero | 不允许为零 | `boolean` | `false` |
| thousand | 千分位格式化 | `boolean` | `true` |

> ^el^ 表示继承自 [el-input](https://element-plus.org/zh-CN/component/input.html) 的属性

## 注意事项

### 属性默认值
- 有默认值的属性无需显式设置，只有需要修改默认值时才需要配置。
 如：`clearable` 默认为 `true`，无需显式设置。只有需要 `clearable: false` 时才需设置。
- 数值相关属性（`max`、`min`、`radix`、`nonzero`）默认不设置，只有明确需要时才添加。

```json
// ❌ 错误：无需设置默认值属性
{ "prop": "name", "props": { "clearable": true } }
// ✅ 正确：使用默认值
{ "prop": "name" }

// ❌ 错误：数值文本框默认不加数值相关属性
{ "prop": "amount", "label": "金额", "props": { "thousand": true } }
// ✅ 正确：数值文本框无需设置数值相关属性
{ "prop": "amount", "label": "金额" }
// ✅ 正确：有特殊需求时才设置
{ "prop": "amount", "label": "金额", "props": { "radix": 2, "max": 999999 } }
```

## 在 Form 中使用

```tsx
const formItemList = [
  {
    prop: 'name',
    label: '名称',
  },
  {
    prop: 'number',
    label: '数字',
  },
  {
    prop: 'remark',
    label: '备注',
    col: 24,
    props: {
      type: 'textarea',
      rows: 4,
      maxlength: 200,
      showWordLimit: true,
    },
  },
]
```

## 数字输入

```tsx
const formItemList = [
  {
    prop: 'amount',
    label: '金额',
    props: {
      max: 999999,
      min: 0,
      radix: 2, // 保留2位小数
      thousand: true, // 千分位
    },
  },
]
```

## 格式化显示

通过 `formatter` 属性自定义显示格式：

```tsx
{
  prop: 'value',
  label: '值',
  disabled: true,
  props: {
    formatter: (value) => `${value} 元`,
  },
}
```