UseElInput - 输入框

组件介绍

UseElInput 是基于 Element Plus 的 el-input 组件进行二次封装的通用输入框组件，在保留 el-input 原有核心功能的基础上，通过封装通用逻辑、扩展灵活的自定义内容插槽、统一默认配置等方式，简化了输入框的使用成本，同时增强了组件的扩展性和适配性，适配表单录入、搜索框、文本域等所有输入类业务场景。

核心亮点

统一默认配置，减少重复编码
自动识别字数限制，提升交互体验
灵活的自定义内容插槽，支持任意内容渲染
自动聚焦指令封装，简化焦点控制
双向绑定封装，简化值传递逻辑
完整继承 el-input 原生属性，兼容所有原生功能
响应式宽度控制，适配不同布局

解决痛点

原生 el-input「配置零散、重复编码」

痛点：原生 el-input 每次使用需重复设置 placeholder、clearable、rows 等基础属性，不同页面的输入框基础配置不统一，业务代码冗余，开发效率低。

解决方案：组件通过内置统一的默认配置，收敛基础属性，无需重复声明；同时支持 props 灵活覆盖默认值，兼顾通用性与个性化，减少 80% 以上的基础属性重复编码。

原生 el-input「自定义内容插槽渲染复杂」

痛点：原生 el-input 的前缀、后缀等插槽，需手动编写 <template #prefix> 等模板结构，且不支持任意内容（如组件、HTML 片段）的渲染，复杂自定义场景需额外封装，开发成本高。

解决方案：组件扩展 prefixContent、suffixContent 等 props，直接传递渲染内容，结合 UseRender 组件支持文本、组件、HTML 片段等任意类型内容渲染，无需编写繁琐的插槽模板，简化自定义开发。

密码框、字数限制「功能需手动关联，易漏绑错绑」

痛点：原生 el-input 中，密码框需手动绑定 show-password 属性，字数限制需手动关联 maxlength 和 show-word-limit 两个属性，易出现漏绑、错绑，导致功能异常，增加调试成本。

解决方案：组件自动识别属性，检测到 type="password" 自动开启 show-password，检测到 maxlength 自动开启 show-word-limit，无需手动关联，避免漏绑错绑问题，提升开发效率。

输入框单位展示「布局混乱、对齐不一致」

痛点：业务中常需在输入框右侧展示单位（如 “元”“%”），原生实现需手动编写布局代码，不同页面的单位布局不统一，易出现对齐错乱、样式混乱的问题，适配成本高。

解决方案：组件内置 unit 属性，搭配统一的 flex 布局，专门用于数值类输入框的单位渲染，无需手动编写布局代码，保证单位与输入框的对齐一致性，统一视觉样式。

输入框聚焦「逻辑分散、需手动编写」

痛点：表单、弹窗等场景中，需让输入框自动聚焦，原生需手动获取 DOM 元素并调用 focus() 方法，逻辑分散在各个页面，易出错且维护成本高。

解决方案：组件内置 vFocus 自定义指令，仅需给组件添加 autoFocus 属性，即可实现自动聚焦，无需手动编写聚焦逻辑，统一聚焦控制方式。

原生 el-input「与业务场景适配碎片化」

痛点：原生 el-input 仅提供基础输入功能，业务中需结合场景做大量适配（如文本域样式统一、密码框适配、字数统计、单位展示等），适配逻辑分散在各个页面，难以统一维护。

解决方案：组件将业务中高频的适配逻辑（文本域默认样式、密码框适配、字数统计等）封装为通用能力，开箱即用，无需重复开发适配逻辑，降低业务与基础组件的适配成本，保证所有页面输入框交互、样式统一。

使用

Types

/**
 * props接口
 */
export interface Props {
  /**
   * 双向绑定数据源 必传
   */
  modelValue: string
  /**
   * el-input组件的宽度
   */
  width?: string
  /**
   * placeholder
   */
  placeholder?: string
  /**
   * 是否可清空 默认是
   */
  clearable?: boolean
  /**
   * el-input头部插槽内容
   */
  prefixContent?: string | Record<string, any>
  /**
   * el-input尾部插槽内容
   */
  suffixContent?: string | Record<string, any>
  /**
   * el-input前置插槽内容
   */
  prependContent?: string | Record<string, any>
  /**
   * el-input后置插槽内容
   */
  appendContent?: string | Record<string, any>
  /**
   * 单位 显示在el-input的右外部
   */
  unit?: string | Record<string, any>
  /**
   * 控制是否能被用户缩放 仅type=textare生效
   */
  resize?: string
  /**
   * 输入框行数 仅type=textare生效
   */
  rows?: number
}

/**
 * emits接口
 */
export interface Emits {
  /**
   * 双向绑定数据源 即v-model
   */
  (e: 'update:modelValue', value: string): void
}

Props && Emits

const props = withDefaults(defineProps<Props>(), {
  placeholder: '请输入',
  clearable: true,
  resize: 'none',
  rows: 6
} satisfies DefaultsType<Props>)

const emits = defineEmits<Emits>()

UseElInput - 输入框 ​

组件介绍 ​

核心亮点 ​

解决痛点 ​

使用 ​

Types ​

Props && Emits ​

UseElInput - 输入框

组件介绍

核心亮点

解决痛点

使用

Types

Props && Emits