# XInput 组件

XInput 是一个封装了 Ant Design Vue 的输入框组件，提供搜索功能和自定义配置。

## 功能特点

- 支持从配置中获取参数
- 支持前缀和后缀图标
- 集成搜索功能
- 支持双向绑定

## 配置选项

组件通过 `queryParamsName` 属性获取配置，配置内容如下：

| 参数           | 说明     | 类型            | 默认值 |
|--------------|--------|---------------| --- |
| size         | 输入框大小  | string        | 'default' |
| prefix       | 前缀图标类型 | string        | '' |
| defaultValue | 默认值    | string/number | '' |
| disabled     | 是否禁用   | boolean       | false |
| placeholder  | 占位文本   | string        | '' |
| allowClear   | 是否允许清除 | boolean       | true |
| suffix       | 后缀图标类型 | string        | 'search' |
| maxLength    | 最大输入长度 | number        | 50 |
 | label        | 输入框前文字 | String        | '' |
 | tail         | 输入框后文字 | String        | '' |

## 事件

| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| search | 搜索事件，在输入值变化、按下回车键或点击图标时触发 | function(value) |

## 使用示例

### 基础用法

```vue
<template>
  <x-input
    v-model="searchValue"
    @search="handleSearch"
  />
</template>

<script>
export default {
  data() {
    return {
      searchValue: ''
    }
  },
  methods: {
    handleSearch(value) {
      console.log('搜索值:', value)
      // 执行搜索逻辑
    }
  }
}
</script>
```

### 自定义配置

在后端配置中定义如下配置：

```json
{
  "size": "default",
  "prefix": "",
  "defaultValue": "",
  "disabled": false,
  "placeholder": "请输入关键词",
  "allowClear": true,
  "suffix": "search",
  "maxLength": 50
}
```

然后在组件中使用：

```vue
<template>
  <x-input
    v-model="searchValue"
    query-params-name="customInputConfig"
    @search="handleSearch"
  />
</template>
```

## 注意事项

1. 组件会在每次输入值变化时触发 `search` 事件
2. 点击前缀/后缀图标或按下回车键也会触发 `search` 事件
3. 组件通过 `v-model` 支持双向绑定
