InputPlus 增强输入框

增强输入组件，支持文本、数字、金额、百分比、密码等输入类型，提供自动格式化、字数统计等功能。

基础用法

import { defineComponent, reactive } from 'vue'
import InputPlus from '@/components/InputPlus'

export default defineComponent({
  name: 'DemoInputPlusBasic',
  setup() {
    const model = reactive({
      text: '',
      number: undefined as number | undefined,
      amount: undefined as number | undefined,
      percentage: undefined as number | undefined,
      password: '',
      limited: '',
    })

    const section = (title: string) => (
      <div style="font-size:13px; font-weight:600; color:#333; margin-top:4px;">
        {title}
      </div>
    )

    return () => (
      <div class="demo-block">
        <div style="display:flex; flex-direction:column; gap:16px; max-width:420px;">
          {section('文本输入')}
          <InputPlus v-model={model.text} placeholder="请输入文本内容" />

          {section('数字输入（范围 0~100，小数位 2）')}
          <InputPlus v-model={model.number} type="number" placeholder="0.00" min={0} max={100} />

          {section('金额（自动格式化两位小数，后缀 元）')}
          <InputPlus v-model={model.amount} type="amount" placeholder="0.00" />

          {section('百分比（显示 % 后缀，内部转为小数）')}
          <InputPlus v-model={model.percentage} type="percentage" placeholder="如输入 80 表示 80%" />

          {section('密码（点击眼睛图标切换明文/密文）')}
          <InputPlus v-model={model.password} type="password" placeholder="请输入密码" />

          {section('字数限制（maxlength + showLimit）')}
          <InputPlus v-model={model.limited} placeholder="最多 10 个字" maxlength={10} showLimit />

          {section('禁用状态')}
          <InputPlus v-model={model.text} disabled placeholder="禁止输入" />

          {section('选中自动全选（selectOnFocus）')}
          <InputPlus v-model={model.number} type="number" placeholder="点击输入框自动全选" selectOnFocus />

          <div style="font-size:13px; color:#666; background:#f5f7fa; padding:12px; border-radius:4px; white-space:pre-wrap; word-break:break-all; line-height:1.6;">
            当前值：{JSON.stringify(model, null, 2)}
          </div>
        </div>
      </div>
    )
  },
})

Props

属性名	类型	默认值	说明
modelValue	string | number	—	绑定值（支持 v-model）
type	'text' | 'number' | 'amount' | 'percentage' | 'password'	'text'	输入类型
placeholder	string	—	占位文本
disabled	boolean	false	是否禁用
max	number	Infinity	数字/金额/百分比最大值
min	number	-Infinity	数字/金额/百分比最小值
decimal	number	2	小数位数（数字/金额/百分比类型）
maxlength	number	—	输入最大字符数（文本类型）
showLimit	boolean	false	是否显示字数统计（需同时设置 maxlength）
trimStartZero	boolean	true	是否去掉多余的起始零
selectOnFocus	boolean	false	聚焦时是否自动全选文本
suffix	any	—	自定义后缀内容
prefix	any	—	自定义前缀内容

类型说明

• text — 普通文本输入
• number — 数字输入，可限制范围（min/max）和小数位数（decimal），自动去掉前导零
• amount — 金额输入，自动保留 decimal 位小数，附加后缀 "元"
• percentage — 百分比输入，显示时带 "%" 后缀，内部存储转为小数（如输入 80 存储为 0.8）
• password — 密码输入，可点击眼睛图标切换明文/密文显示

作为 DataForm 的默认控件类型，当 columns 中不指定 type 时默认使用 InputPlus。在 DataForm 配置中使用 props 传递以上属性。