TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
1181
5m

输入框 xInput ​

在线预览
在线模拟尺寸:

介绍 ​

表单输入框，样式可定制化强

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-input/x-input.uvue

使用 ​

ts

<x-input></x-input>

Props 属性 ​

名称说明类型默认值
_style自定义style
标签请写_style,不是-style，插件文档转换问题
string""
focusBorder输入框统一的聚集样式
第3表示默认的边颜色(如果为空表示默认边颜色不生效.),第4表示聚焦时的颜色(空表示取全局color,transparent为不生效就是没有聚集样式)
['2px','solid','','']
全局的配置名称是:inputFocusBorder,可以全局设置.
Array():string[] => [] as string[]
placeholderStyle占位的样式
string""
_class自定class
标签请写_class,不是-class，插件文档转换问题
string""
round输入框圆角
string""
showClear是否显示清除图标
booleanfalse
rightText右侧文本
string""
leftText左侧文本
string""
modelValue双向绑定的输入值
string""
placeholder输入框提示语
string""
iconColor左图标的颜色
默认空值取全局的主题色。
string""
clearColor清除图标的颜色
string"#bfbfbf"
color输入框背景
string""
darkBgColor输入框暗黑背景，空值取全局的配置
提供会覆盖全局的配色。默认是透明
string"transparent"
fontColor输入框的字体颜色
string"#333333"
darkFontColor如果你提供，就会覆盖自动的反转配色。
默认是fontColor的反转颜色。
string""
fontSize文字大小
string"16"
leftIcon左图标
string""
name见官方文档：https://doc.dcloud.net.cn/uni-app-x/component/input.html
string""
disabled见官方文档：https://doc.dcloud.net.cn/uni-app-x/component/input.html
booleanfalse
type类型
"text"\
"number"\
"digit"\
"tel"
见官方文档：https://doc.dcloud.net.cn/uni-app-x/component/input.html
不管你是number,还是digit或者tel是可以让用户按规范填写的只能是数字
但你定义modelValue类型时，只能是string，请特别注意。
union"text"
password是否是密码类型
booleanfalse
maxlength最大字符数量，如果要显示统计字符，请设置showChartCount为ture
number-1
cursorSpacing``
number0
cursorColor``
string""
autoFocus``
booleanfalse
focus``
booleanfalse
confirmType``
union"next"
confirmHold``
booleanfalse
cursor``
number0
selectionStart``
number-1
selectionEnd``
number-1
adjustPosition``
booleantrue
width宽
string"auto"
height高
string"44"
trim自动删除首尾空格?
只会在失去焦点时删除.
这里需要个解释:由于用户输入过快或者允许用户自由的输入,组件本身不会去干涉用户输入
因为一旦干涉就在会在低端机上会出现字符闪烁的情况(特别是微信小程序上的安桌机),看似简单的功能后面隐藏着非常大的风险
因此你在事件中收到的字符绝对是经过处理的字符串,但用户的输入框可能还是有空格.
booleantrue
align文本对齐方式
union"left"
autoHeighttype=textarea时生效
booleanfalse
fixed如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
booleanfalse
showFooter显示底部的注释说明及出错信息。
booleanfalse
showChartCount是否显示字符统计。
booleanfalse
inputPadding格式就是正常的css格式
比如：8rpx 8rpx 0rpx 0rpx
string"8px 12px"
inputmode见官方文档：https://doc.dcloud.net.cn/uni-app-x/component/input.html#%E5%B1%9E%E6%80%A7
union'text'
holdKeyboardfocus时，点击页面的时候不收起键盘
见官方文档：https://doc.dcloud.net.cn/uni-app-x/component/input.html#%E5%B1%9E%E6%80%A7
booleanfalse
isLink是否作为可点击指示。会在右边显示图标指示可以点击的链接状态
booleanfalse
rightIcon``
string""

Events 事件 ​

名称参数说明
click-点击整个输入框触发
clear-清空时触发
rightClickvalue: string点击右侧文本时触发,如果你使用了插槽替换了，此事件不会触发
confirmvalue: string输入法点了确认搜索按钮时触发
inputvalue: string输入时触发
focusevt: UniInputBlurEvent获得焦点时
blurevt: UniInputBlurEvent失去焦点时
linechangeevt: UniTextareaLineChangeEvent行高变化时,type=textarea时生效
keyboardheightchangeevt: UniInputKeyboardHeightChangeEvent键盘高度变化时触发
update:modelValue--

Slots 插槽 ​

名称说明数据
left左插槽-
inputLeft输入框内的左插槽-
inputRight输入框内右插槽-
right右插槽-
footer底部提示插槽-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/biaodan/input

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">输入框 xInput</x-text>
			<x-text color="#999999" >定义多样化</x-text>
		</x-sheet>
		<x-sheet>
			<x-input v-model="content" darkBgColor=""></x-input>
			<!-- #ifdef MP-WEIXIN -->
			<x-text font-size="18" class=" text-weight-b my-8">点击获取微信昵称</x-text>
			<x-input v-model="content" type="nickname" darkBgColor=""></x-input>
			<!-- #endif -->
			
			<x-text font-size="18" class=" text-weight-b my-8">定义focusBorder聚焦样式</x-text>
			<x-text color="#999999" class=" mb-16">为了向下兼容,如果你要全局开启,可一全局配置:inputFocusBorder来让全局生效.</x-text>
			<x-input :focusBorder="['2px','solid','transparent','']" v-model="content" darkBgColor=""></x-input>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18"  class="text-weight-b ">显示密码</x-text>
		</x-sheet>
		<x-sheet>
			<x-input darkBgColor="" :password="true"></x-input>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class="text-weight-b ">显示左右文本</x-text>
		</x-sheet>
		<x-sheet>
			<x-input darkBgColor="" left-icon="money-cny-circle-line" type="number" placeholder="请输入金额" right-text="万元"  left-text="物料金额" ></x-input>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class="text-weight-b ">通过插槽定义</x-text>
		</x-sheet>
		<x-sheet>
			<x-input darkBgColor="" left-icon="terminal-line" placeholder="输入验证码" >
				<template v-slot:inputLeft>
					<x-text class="ml-12">4位码</x-text>
				</template>
				<template v-slot:inputRight>
					<x-button round="8" class="mr-2" height="40" width="90">获取</x-button>
				</template>
			</x-input>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class="text-weight-b mb-8">文本域-自动高-限制字符</x-text>
			<x-input darkBgColor="" :showFooter="true" :maxlength="255" align="right" :autoHeight="true" type="textarea">
				<template #footer>
					<x-text line-height="1.2" color="error">请不要超过字符数量，详细填写哦！</x-text>
				</template>
			</x-input>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class="text-weight-b mb-8">文本域-限定高</x-text>
			<x-input darkBgColor="" height="80"  type="textarea"></x-input>
		</x-sheet>
		<view style="height:50px"></view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	const content = ref("")
</script>

<style lang="scss">

</style>
最近更新