Input 输入框

17:06

说明

输入框，type 支持 text、number、password、digit、textarea、select 等，border 可选 surround（四周）/ bottom（仅底边框）/ none（默认无边框）。内置清空、密码明文切换与字数统计；默认无边框无背景，放在 ux-form-item 内时会继承表单项 size，并在输入 / 失焦时自动触发表单校验。

兼容性

平台	支持情况
App	✅ 支持（原生输入的文字色 / 对齐 / placeholder 由组件内联写入，页面 `class` 覆盖不到输入文字颜色）
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

使用 v-model 双向绑定输入框的值，border 显示边框。

查看源码

vue

<template>
    <ux-input v-model="value" placeholder="请输入内容" border />
    <text class="input-status">当前输入: {{ value }}</text>
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

<style scoped>
.input-status {
    font-size: 13px;
    color: #606266;
    margin-top: 8px;
}
</style>

输入框类型 type

支持 text / number / password / textarea 等类型。

查看源码

vue

<template>
    <ux-input v-model="value" :type="type" placeholder="请输入内容" border />
</template>

<script setup lang="uts">
const value = ref<string>('');
const type = ref<string>('text');
</script>

对齐方式 input-align

通过 input-align 设置输入框文字的对齐方式。

查看源码

vue

<template>
    <ux-input v-model="value" input-align="center" placeholder="居中对齐" border />
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

尺寸配置 size

支持 small / default / large 预设值和自定义数值（单位px）。

查看源码

vue

<template>
    <ux-input v-model="value" size="large" placeholder="大尺寸输入框" border />
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

自定义字号 font-size

通过 font-size 设置输入框文字大小，优先于 size 预设。

查看源码

vue

<template>
    <ux-input v-model="value" font-size="20" placeholder="自定义字号" border />
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

边框颜色 border-color

通过 border-color 自定义边框颜色，需配合 border 使用。

查看源码

vue

<template>
    <ux-input v-model="value" placeholder="自定义边框颜色" border border-color="#19be6b" />
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

密码类型 password

type=password 时默认显示右侧眼睛图标，可点击切换明文。

查看源码

vue

<template>
    <ux-input v-model="value" type="password" :password-icon="true" placeholder="请输入密码" border />
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

清空 clearable

clearable=true 时，输入内容后显示清空图标，点击可清空。

查看源码

vue

<template>
    <ux-input v-model="value" :clearable="true" placeholder="可一键清空" border />
</template>

<script setup lang="uts">
const value = ref<string>('ux-input');
</script>

字数统计 count

type=textarea 且 count=true 时，右下角显示字数统计。

查看源码

vue

<template>
    <ux-input v-model="value" type="textarea" :count="true" :maxlength="100" placeholder="支持字数统计" border />
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

禁用 / 只读

disabled 禁用输入，readonly 只读但可点击触发 click 事件。

查看源码

vue

<template>
    <ux-input v-model="disabledValue" disabled placeholder="禁用状态" border />
    <ux-input v-model="readonlyValue" readonly placeholder="只读状态" border />
</template>

<script setup lang="uts">
const disabledValue = ref<string>('禁用状态');
const readonlyValue = ref<string>('只读状态');
</script>

自定义高度 height

通过 height 设置输入框高度，单位px，auto 为自动高度。

查看源码

vue

<template>
    <ux-input v-model="value" :height="50" placeholder="自定义高度" border />
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

前置内容 prefix

通过 prefix 插槽在录入区之前放置图标或自定义内容，常用于金额、单位等场景。

查看源码

vue

<template>
    <ux-input v-model="value" type="digit" placeholder="请输入金额" border>
        <template #prefix>
            <ux-icon name="rmb-circle-fill" :size="8" />
        </template>
    </ux-input>
</template>

<script setup lang="uts">
const value = ref<string>('');
</script>

自动聚焦 focus

focus=true 时页面加载自动获得焦点，可配合 selection-start / selection-end 选中文本。

查看源码

vue

<template>
    <ux-input v-model="value" :focus="focus" placeholder="自动聚焦的输入框" border />
</template>

<script setup lang="uts">
const value = ref<string>('');
const focus = ref<boolean>(true);
</script>

自动增高 auto-height

type=textarea 且 auto-height=true 时，输入内容自动撑高输入区域。

查看源码

vue

<template>
    <ux-input v-model="value" type="textarea" :auto-height="autoHeight" placeholder="多行输入，自动增高" border />
</template>

<script setup lang="uts">
const value = ref<string>('');
const autoHeight = ref<boolean>(true);
</script>

去除两端空格 trim

trim=true 时，输入内容自动去除首尾空格。

查看源码

vue

<template>
    <ux-input v-model="value" :trim="trim" placeholder="输入带空格的内容" border />
</template>

<script setup lang="uts">
const value = ref<string>('');
const trim = ref<boolean>(true);
</script>

验证状态 validate-state

validate-state=true 时边框变红，用于表单校验失败提示。

查看源码

vue

<template>
    <ux-input v-model="value" :validate-state="validateState" placeholder="验证失败示例" border />
</template>

<script setup lang="uts">
const value = ref<string>('');
const validateState = ref<boolean>(true);
</script>

API

Props

属性	说明	类型	默认值	版本
`customStyle`	自定义根节点样式	`string \| UTSJSONObject`	`-`	-
`customClass`	自定义根节点样式类	`string`	`''`	-
`modelValue`	用于双向绑定输入框的值	`string \| number`	`''`	-
`type`	输入框的类型，textarea，text，number	`InputType`	`'text'`	-
`inputAlign`	输入框文字的对齐方式	`InputAlign`	`'left'`	-
`size`	输入框文字的大小	`SizeType \| ''`	`''`	-
`fontSize`	输入内容字体大小（不传走 size 预设）	`string \| number`	`''`	-
`placeholder`	placeholder显示值	`string`	`''`	-
`disabled`	是否禁用输入框	`boolean`	`false`	-
`readonly`	是否只读	`boolean`	`false`	-
`maxlength`	输入框的最大可输入长度	`number \| string`	`140`	-
`count`	是否显示统计字数	`boolean`	`false`	-
`cursorColor`	光标颜色	`string`	`''`	-
`placeholderStyle`	placeholder的样式	`string`	`''`	-
`confirmType`	设置键盘右下角按钮的文字	`InputConfirmType`	`'done'`	-
`fixed`	textarea 是否在 fixed 区域	`boolean`	`false`	-
`focus`	是否自动获得焦点	`boolean`	`false`	-
`passwordIcon`	密码类型时，是否显示右侧的密码图标	`boolean`	`true`	-
`border`	边框形态	`boolean \| BorderType`	`'none'`	-
`borderColor`	输入框的边框颜色	`string`	`''`	-
`autoHeight`	是否自动增高输入区域	`boolean`	`true`	-
`selectOpen`	type=select时，旋转右侧的图标	`boolean`	`false`	-
`height`	高度，单位px	`number \| string`	`''`	-
`clearable`	是否可清空	`boolean`	`true`	-
`cursorSpacing`	指定光标与键盘的距离，单位 px	`number \| string`	`0`	-
`selectionStart`	光标起始位置	`number \| string`	`-1`	-
`selectionEnd`	光标结束位置	`number \| string`	`-1`	-
`trim`	是否自动去除两端的空格	`boolean`	`true`	-
`showConfirmbar`	是否显示键盘上方带有"完成"按钮那一栏	`boolean`	`true`	-
`adjustPosition`	弹出键盘时是否自动调节高度	`boolean`	`true`	-
`confirmHold`	点击键盘右下角按钮时是否保持键盘不收起	`boolean`	`false`	-
`validateState`	输入框的验证状态	`boolean`	`false`	-

Events

事件名	说明	回调参数	版本
`input`	输入内容时触发	`value: string`	-
`change`		`value: string`	-
`blur`	输入框失去焦点时触发	`value: string`	-
`focus`	输入框获得焦点时触发	`value: string`	-
`confirm`	点击完成按钮时触发	`value: string`	-
`click`	点击输入框时触发	`event: UniEvent`	-
`clear`	点击清空图标时触发	`event: UniEvent`	-

Slots

插槽名	说明	版本
`prefix`	录入区前置内容（如金额前缀图标），位于输入框之前，仅在传入时渲染	-

注意事项

默认 border 为 'none'（无边框），与 ux-textarea 默认 'surround' 相反；border 也接受 true/false 作为 'surround'/'none' 的便捷别名。
count 仅在 type="textarea" 时显示；maxlength 默认 140。
clearable 默认 true，清空图标在聚焦、值非空且未禁用时出现；失焦后图标延迟约 100ms 隐藏，避免点图标时先触发 blur 导致点不中。
readonly 样式不变、可点击并触发 click；type="select" 同样强制只读。组件用透明遮罩层捕获点击（原生 input 设 disabled 会阻止点击冒泡）。
type="select" 会强制输入框只读并显示右侧下拉箭头，select-open 控制箭头是否旋转（常配合弹层使用）。
App 端如需调整输入文字颜色 / 字号 / 对齐，请使用 font-size、custom-style、input-align 等 props；页面 class 对原生输入内容无效。
放在 ux-form-item 内时，size 缺省继承表单项，validate-state 与表单项校验态取「或」，输入 / 失焦会触发对应校验。

Input 输入框 ​

说明 ​

兼容性 ​

示例 ​

基础用法 ​

输入框类型 type ​

对齐方式 input-align ​

尺寸配置 size ​

自定义字号 font-size ​

边框颜色 border-color ​

密码类型 password ​

清空 clearable ​

字数统计 count ​

禁用 / 只读 ​

自定义高度 height ​

前置内容 prefix ​

自动聚焦 focus ​

自动增高 auto-height ​

去除两端空格 trim ​

验证状态 validate-state ​

API ​

Props ​

Events ​

Slots ​

注意事项 ​

Input 输入框

说明

兼容性

示例

基础用法

输入框类型 type

对齐方式 input-align

尺寸配置 size

自定义字号 font-size

边框颜色 border-color

密码类型 password

清空 clearable

字数统计 count

禁用 / 只读

自定义高度 height

前置内容 prefix

自动聚焦 focus

自动增高 auto-height

去除两端空格 trim

验证状态 validate-state

API

Props

Events

Slots

注意事项