FxInput 输入框

通过鼠标或键盘输入字符。不依赖任何 UI 框架，支持 input / textarea 双模式、clearable、showPassword、showWordLimit、formatter/parser、autosize。

基础用法

<template>
  <FxInput v-model="value" style="width: 240px" placeholder="请输入" />
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("")
</script>

禁用

<template>
  <FxInput v-model="value" style="width: 240px" placeholder="请输入" disabled />
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("")
</script>

通过 disabled 属性禁用。

可清空

<template>
  <div class="flex items-center gap-4">
    <FxInput v-model="value" style="width: 240px" placeholder="请输入" clearable />
    <FxInput
      v-model="textarea"
      style="width: 240px"
      placeholder="请输入"
      type="textarea"
      clearable
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("")
const textarea = ref("")
</script>

通过 clearable 属性使输入可清空。

自定义清空图标

<template>
  <FxInput
    v-model="value"
    style="width: 240px"
    placeholder="请输入"
    clearable
    clear-icon="ep:select"
  />
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("")
</script>

通过 clear-icon 属性自定义清空图标（字符串为 FxIcon 图标名）。

格式化

用 formatter 展示格式化值，通常同时使用 parser。

<template>
  <FxInput
    v-model="value"
    style="width: 240px"
    placeholder="请输入金额"
    :formatter="formatter"
    :parser="parser"
  />
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("")
const formatter = (val: string) =>
  `$ ${val}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
const parser = (val: string) => val.replace(/\$\s?|(,*)/g, "")
</script>

密码框

<template>
  <div class="flex items-center gap-4">
    <FxInput
      v-model="value"
      style="width: 240px"
      type="password"
      placeholder="请输入密码"
      show-password
    />
    <FxInput
      v-model="value"
      style="width: 240px"
      type="password"
      placeholder="自定义密码图标"
      show-password
    >
      <template #password-icon="{ visible }">
        <FxIcon :name="visible ? 'ep:unlock' : 'ep:lock'" />
      </template>
    </FxInput>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("")
</script>

通过 show-password 属性得到可切换显示的密码框。

带图标

<template>
  <div>
    <p style="margin: 0 0 12px">使用属性</p>
    <div class="flex flex-wrap gap-4">
      <FxInput
        v-model="input1"
        prefix-icon="ep:search"
        placeholder="搜索"
        style="width: 240px"
      />
      <FxInput
        v-model="input2"
        suffix-icon="ep:calendar"
        placeholder="选日期"
        style="width: 240px"
      />
    </div>
    <p style="margin: 20px 0 12px">使用插槽</p>
    <div class="flex flex-wrap gap-4">
      <FxInput v-model="input3" placeholder="搜索" style="width: 240px">
        <template #prefix><FxIcon name="ep:search" /></template>
      </FxInput>
      <FxInput v-model="input4" placeholder="选日期" style="width: 240px">
        <template #suffix><FxIcon name="ep:calendar" /></template>
      </FxInput>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const input1 = ref("")
const input2 = ref("")
const input3 = ref("")
const input4 = ref("")
</script>

用 prefix-icon 和 suffix-icon 属性添加图标，也可用 prefix / suffix 具名插槽。

文本域

用于输入多行文本，可缩放。加 type="textarea" 切换为原生 textarea。

<template>
  <FxInput
    v-model="value"
    style="width: 240px"
    type="textarea"
    :rows="3"
    placeholder="请输入"
  />
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("")
</script>

通过 rows 控制高度。

自适应文本域

<template>
  <FxInput
    v-model="t1"
    style="width: 240px"
    autosize
    type="textarea"
    placeholder="请输入"
  />
  <div style="margin: 20px 0" />
  <FxInput
    v-model="t2"
    style="width: 240px"
    :autosize="{ minRows: 2, maxRows: 4 }"
    type="textarea"
    placeholder="请输入"
  />
</template>

<script setup lang="ts">
import { ref } from "vue"
const t1 = ref("")
const t2 = ref("")
</script>

给 textarea 设置 autosize，高度随内容自适应；可传对象 { minRows, maxRows }。

复合输入

前置或后置元素，一般是标签或按钮。

<template>
  <div>
    <FxInput v-model="input1" style="max-width: 600px" placeholder="请输入">
      <template #prepend>https://</template>
    </FxInput>
  </div>
  <div style="margin-top: 16px">
    <FxInput v-model="input2" style="max-width: 600px" placeholder="请输入">
      <template #append>.com</template>
    </FxInput>
  </div>
  <div style="margin-top: 16px">
    <FxInput v-model="input3" style="max-width: 600px" placeholder="请输入">
      <template #prepend>
        <FxSelect v-model="select" placeholder="选择" style="width: 110px">
          <FxOption label="餐厅" value="1" />
          <FxOption label="订单号" value="2" />
          <FxOption label="电话" value="3" />
        </FxSelect>
      </template>
      <template #append>
        <FxBtn><FxIcon name="ep:search" /></FxBtn>
      </template>
    </FxInput>
  </div>
  <div style="margin-top: 16px">
    <FxInput v-model="input3" style="max-width: 600px" placeholder="请输入">
      <template #prepend>
        <FxBtn><FxIcon name="ep:search" /></FxBtn>
      </template>
      <template #append>
        <FxSelect v-model="select" placeholder="选择" style="width: 110px">
          <FxOption label="餐厅" value="1" />
          <FxOption label="订单号" value="2" />
          <FxOption label="电话" value="3" />
        </FxSelect>
      </template>
    </FxInput>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const input1 = ref("")
const input2 = ref("")
const input3 = ref("")
const select = ref("")
</script>

用 prepend / append 插槽分发前置 / 后置元素。

尺寸

<template>
  <div class="flex flex-col gap-4">
    <div class="flex flex-wrap gap-4 items-center">
      <FxInput v-model="v1" style="width: 240px" size="large" placeholder="Large" />
      <FxInput v-model="v2" style="width: 240px" placeholder="Default" />
      <FxInput v-model="v3" style="width: 240px" size="small" placeholder="Small" />
    </div>
    <div class="flex flex-wrap gap-4 items-center">
      <FxInput
        v-model="v1"
        style="width: 240px"
        size="large"
        placeholder="Large"
        suffix-icon="ep:search"
      />
      <FxInput
        v-model="v2"
        style="width: 240px"
        placeholder="Default"
        suffix-icon="ep:search"
      />
      <FxInput
        v-model="v3"
        style="width: 240px"
        size="small"
        placeholder="Small"
        suffix-icon="ep:search"
      />
    </div>
    <div class="flex flex-wrap gap-4 items-center">
      <FxInput
        v-model="v1"
        style="width: 240px"
        size="large"
        placeholder="Large"
        prefix-icon="ep:search"
      />
      <FxInput
        v-model="v2"
        style="width: 240px"
        placeholder="Default"
        prefix-icon="ep:search"
      />
      <FxInput
        v-model="v3"
        style="width: 240px"
        size="small"
        placeholder="Small"
        prefix-icon="ep:search"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const v1 = ref("")
const v2 = ref("")
const v3 = ref("")
</script>

除默认尺寸外，另有 large 和 small 可选。

限制长度

<template>
  <div class="flex flex-wrap items-center gap-4">
    <FxInput
      v-model="text"
      style="width: 240px"
      maxlength="10"
      placeholder="请输入"
      show-word-limit
    />
    <FxInput
      v-model="text"
      style="width: 240px"
      maxlength="10"
      placeholder="请输入"
      show-word-limit
      word-limit-position="outside"
    />
  </div>
  <div style="margin: 20px 0" />
  <div class="flex flex-wrap items-center gap-4">
    <FxInput
      v-model="textarea"
      style="width: 240px"
      type="textarea"
      maxlength="30"
      placeholder="请输入"
      show-word-limit
    />
    <FxInput
      v-model="textarea"
      style="width: 240px"
      type="textarea"
      maxlength="30"
      placeholder="请输入"
      show-word-limit
      word-limit-position="outside"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const text = ref("")
const textarea = ref("")
</script>

maxlength / minlength 限制输入长度；show-word-limit 显示字数统计；word-limit-position="outside" 让计数显示在输入框外。

字素计数（count-graphemes）

<template>
  <FxInput
    v-model="text"
    maxlength="10"
    placeholder="请输入"
    show-word-limit
    :count-graphemes="calc"
  />
  <div style="margin: 20px 0" />
  <FxInput
    v-model="textarea"
    maxlength="20"
    type="textarea"
    placeholder="请输入"
    show-word-limit
    :count-graphemes="calc"
  />
</template>

<script setup lang="ts">
import { ref } from "vue"
const text = ref("😀😁")
const textarea = ref("😀😁")
// 按字素（码点）计数，emoji 算一个
const calc = (value: string) => Array.from(value).length
</script>

// 用 Intl.Segmenter 正确统计 emoji / 组合字符的字素数
const countGraphemes = (value: string) =>
  Array.from(new Intl.Segmenter().segment(value)).length

设置 count-graphemes 后按字素计算长度，原生 maxlength / minlength 约束不再生效。

浏览器支持

组件用 Intl.Segmenter（Chrome 87+、Firefox 125+、Safari 14.1+）做正确的字素聚类；旧浏览器回退到 Array.from() 按码点迭代。

API

Attributes

属性	说明	类型	默认值
type	类型	'text' | 'textarea' | 'number' | 'password' | 'email' | 'search' | 'tel' | 'url'	text
model-value (v-model)	绑定值	string / number	—
model-modifiers	v-model 修饰符	{ lazy?: true, number?: true, trim?: true }	—
maxlength	原生 maxlength	string / number	—
minlength	原生 minlength	string / number	—
show-word-limit	是否显示字数统计（type 为 text / textarea）	boolean	false
word-limit-position	字数统计位置	'inside' | 'outside'	inside
placeholder	占位文本	string	—
clearable	是否显示清空按钮	boolean	false
clear-icon	自定义清空图标。字符串为 IconString 类型（即 FxIcon 图标名，如 ep:edit、ant-design:home、svg:xxx），亦可传组件	string / Component	CircleClose
formatter	格式化展示值（type 为 text）	(value: string | number) => string	—
parser	反解析	(value: string) => string	—
show-password	是否切换显示密码	boolean	false
disabled	是否禁用	boolean	false
size	尺寸	'large' | 'default' | 'small'	—
prefix-icon	前置图标。字符串为 IconString 类型（即 FxIcon 图标名，如 ep:edit、ant-design:home、svg:xxx），亦可传组件	string / Component	—
suffix-icon	后置图标。字符串为 IconString 类型（即 FxIcon 图标名，如 ep:edit、ant-design:home、svg:xxx），亦可传组件	string / Component	—
rows	textarea 行数	number	2
autosize	textarea 自适应高度	boolean / { minRows?: number, maxRows?: number }	false
autocomplete	原生 autocomplete	string	off
name	原生 name	string	—
readonly	原生 readonly	boolean	false
resize	缩放方向	'none' | 'both' | 'horizontal' | 'vertical'	—
autofocus	原生 autofocus	boolean	false
form	原生 form	string	—
aria-label	原生 aria-label	string	—
tabindex	tabindex	string / number	—
input-style	input / textarea 元素样式	string / CSSProperties	{}
inputmode	原生 inputmode	string	—
min	原生 min（number type）	number / string	—
max	原生 max（number type）	number / string	—
step	原生 step（number type）	number / string	—
count-graphemes	字素计数函数；设置后原生 maxlength/minlength 失效	(value: string) => number	—

Events

事件名	说明	类型
blur	失焦时触发	(event: FocusEvent) => void
focus	聚焦时触发	(event: FocusEvent) => void
change	失焦或回车且值变化时触发	(value: string | number, evt?: Event) => void
input	值变化时触发	(value: string | number) => void
clear	点击清空按钮时触发	(evt?: MouseEvent) => void
keydown	按键时触发	(event: KeyboardEvent | Event) => void
mouseleave	鼠标离开时触发	(event: MouseEvent) => void
mouseenter	鼠标进入时触发	(event: MouseEvent) => void
compositionstart	输入法组合开始	(event: CompositionEvent) => void
compositionupdate	输入法组合更新	(event: CompositionEvent) => void
compositionend	输入法组合结束	(event: CompositionEvent) => void

Slots

插槽名	说明
prefix	前置内容（type 非 textarea）
suffix	后置内容（type 非 textarea）
prepend	前置区块（type 非 textarea）
append	后置区块（type 非 textarea）
password-icon	自定义密码图标（show-password 为 true 时）

Exposes

名称	说明	类型
blur	失焦	() => void
clear	清空值	() => void
focus	聚焦	() => void
input	HTML input 元素	Ref<HTMLInputElement>
ref	input 或 textarea 元素	Ref<HTMLInputElement | HTMLTextAreaElement>
resizeTextarea	重算 textarea 高度	() => void
select	选中文本	() => void
textarea	HTML textarea 元素	Ref<HTMLTextAreaElement>
textareaStyle	textarea 样式	Ref<StyleValue>
isComposing	是否输入法组合中	Ref<boolean>
passwordVisible	密码是否可见	Ref<boolean>

FAQ

为什么 clearable 会让 FxInput 变宽？

FxInput 默认无固定宽度，显示清空图标时组件会变宽，设置宽度即可：

<FxInput v-model="input" clearable style="width: 200px" />