TMUI4x(鸿蒙Next)

Appearance

广告位招租意向联系我
TMUI4x2025-09-03
1131
4.7m

输入框 xInput ​

在线预览
在线模拟尺寸:

介绍 ​

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

平台兼容 ​

H5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑️☑️☑️☑️4.44+1.1.9

文件路径 ​

ts

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

使用 ​

ts

<x-input></x-input>

Props 属性 ​

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

Events 事件 ​

名称参数说明
click-点击整个输入框触发
clear-清空时触发
rightClick**value** : string点击右侧文本时触发,如果你使用了插槽替换了，此事件不会触发
confirm**value** : string输入法点了确认搜索按钮时触发
input**value** : string输入时触发
focus**evt** : UniInputBlurEvent获得焦点时
blur**evt** : UniInputBlurEvent失去焦点时
linechange**evt** : UniTextareaLineChangeEvent行高变化时,type=textarea时生效
keyboardheightchange**evt** : 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>
	export default {
		data() {
			return {
				content:""
			};
		},
		onLoad() {
		}
	}
</script>

<style lang="scss">

</style>
最近更新