UseElInput - 输入框

组件介绍

UseElInput 是基于 Element Plus 的 ElInput 二次封装的输入框组件，专注于为输入框提供开箱即用的默认配置优化、纯文本渲染模式、快捷插槽配置能力，同时标准化外置单位显示、智能特性开关，完整兼容原生 ElInput 核心属性，可直接替换原生 ElInput 使用，大幅降低表单输入场景的重复开发成本。

核心能力

开箱即用的默认配置优化

内置符合业务最佳实践的默认配置：宽度默认 100% 自适应容器、placeholder 默认"请输入"、clearable 默认开启可清空、textarea 模式默认禁止拖拽缩放且初始 6 行，无需每个输入框重复配置基础属性，将对应属性设置为目标值即可覆盖默认行为，兼顾不同场景下的输入框配置需求。

标准化的纯文本渲染模式

支持配置纯文本渲染模式（useRender），设置为 true 即可开启详情页只读展示模式，无需额外编写 v-if 判断切换输入/展示状态，支持传入 RenderConfig 对象自定义纯文本模式的 class 和样式，完美适配表单编辑/详情查看的场景切换需求。

快捷插槽内容配置

通过 prefixContent、suffixContent、prependContent、appendContent 四个属性快速配置输入框四个内置插槽内容，无需编写 template 插槽语法，支持传入字符串或 UseRender 配置对象，自动使用统一渲染组件处理内容，大幅简化输入框前后缀内容的编写成本。

外置单位显示能力

内置 unit 属性支持在输入框右侧外部显示单位，内置 flex 布局保证单位与输入框垂直居中对齐，无需额外编写布局代码，支持传入字符串或 UseRender 配置对象自定义单位内容，完美适配金额、数量、尺寸等带单位的输入场景。

智能特性自动开关

内置智能特性判断：type 为 password 时自动开启密码显示/隐藏切换按钮，存在 maxlength 属性时自动开启字数统计显示，无需手动配置 show-password 和 show-word-limit 属性，减少重复配置代码。

自动类型安全转换

双向绑定自动做类型转换处理，v-model 传入非字符串类型值（如 Number）时自动转换为字符串格式，保证输入框内容与绑定值类型一致性，避免数字类型输入时出现类型不匹配问题，同时对外始终保持 string 类型的 update 事件输出。

自动聚焦指令集成

内置 v-focus 自定义指令支持，传入 autoFocus 属性即可自动触发页面加载后输入框聚焦，无需手动操作 DOM 获取焦点，适用于弹窗表单、新建页面等需要默认聚焦第一个输入框的场景。

原生输入框完全兼容

基于 ElInput 封装，设置 inheritAttrs: false 保证属性隔离，完整透传所有 $attrs 到内部 el-input 组件，完整支持原生 ElInput 所有属性、事件和方法，可直接替换原生 ElInput 使用，无迁移成本，同时补充原生输入框缺失的快捷配置、纯文本模式、外置单位等增强能力。

统一内容渲染能力

所有内容区域（前后缀插槽、前置后置插槽、外置单位、纯文本模式）均统一使用 UseRender 组件渲染，支持字符串、组件、VNode、RenderConfig 等多种内容类型，保证组件内所有内容区域渲染逻辑一致，支持复杂自定义内容场景。

灵活的布局适配

外层容器采用 flex 布局，内置输入框与单位的对齐逻辑，宽度支持自定义配置，默认 100% 自适应父容器宽度，可灵活传入固定宽度值（如"300px"）适配不同布局场景，保证在表单、筛选栏、弹窗等不同容器下的布局一致性。

使用

UseElInput

Props

import type { PropType } from 'vue'
import type { RenderConfig } from '@/types'

/**
 * 组件props
 */
export default {
  /**
   * 双向绑定数据源
   */
  modelValue: {
    type: [String, Number],
    default: ''
  },
  /**
   * el-input组件的宽度
   */
  width: {
    type: String,
    default: '100%'
  },
  /**
   * placeholder
   */
  placeholder: {
    type: String,
    default: '请输入'
  },
  /**
   * 是否可清空 默认是
   */
  clearable: {
    type: Boolean,
    default: true
  },
  /**
   * 是否使用渲染器 默认否
   */
  useRender: {
    type: [Boolean, Object] as PropType<boolean | RenderConfig>,
    default: false
  },
  /**
   * el-input头部插槽内容
   */
  prefixContent: {
    type: [String, Object],
    default: ''
  },
  /**
   * el-input尾部插槽内容
   */
  suffixContent: {
    type: [String, Object],
    default: ''
  },
  /**
   * el-input前置插槽内容
   */
  prependContent: {
    type: [String, Object],
    default: ''
  },
  /**
   * el-input后置插槽内容
   */
  appendContent: {
    type: [String, Object],
    default: ''
  },
  /**
   * 单位 显示在el-input的右外部
   */
  unit: {
    type: [String, Object],
    default: ''
  },
  /**
   * 控制是否能被用户缩放 仅type=textare生效
   */
  resize: {
    type: String,
    default: 'none'
  },
  /**
   * 输入框行数 仅type=textare生效
   */
  rows: {
    type: Number,
    default: 6
  }
}

Types

import type { ExtractPropTypes } from 'vue'
import componentProps from './props'

/**
 * props类型
 */
export type Props = ExtractPropTypes<typeof componentProps>

/**
 * emits类型
 */
export type Emits = {
  /** 更新value值 */
  (e: 'update:modelValue', value: string): void
}

UseElInput - 输入框 ​

组件介绍 ​

核心能力 ​

使用 ​

Props ​

Types ​

UseElInput - 输入框

组件介绍

核心能力

使用

Props

Types