TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
1215
5.1m

输入框 xInputNumber ​

在线预览
在线模拟尺寸:

介绍 ​

表单数字输入框，样式可定制化强，允许整数，小数限制,注意配合属性type和inputmodel来实现业务功能体验

平台兼容 ​

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

文件路径 ​

ts

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

使用 ​

ts

<x-input-number></x-input-number>

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双向绑定的输入值,如果是空值返回的是NaN
numberNaN
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输入类型，数字仅限整数，小数或者整数
union"number"
inputmodenumeric：整数，配合type=number时，输入框只允许输入整数，手机会自动切换为整数数字键盘（不带小数点符号）
decimal：小数，配合type=digit时，输入框允许输入小数或者整数，在手机键盘会自动切换为带小数点的键盘
union'numeric'
decimalLen当type=digit时，可以控制小数点长度，默认1
number1
max最大值
number9999999999
min最小值
number-999999999
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"
holdKeyboardfocus时，点击页面的时候不收起键盘
见官方文档：https://doc.dcloud.net.cn/uni-app-x/component/input.html#%E5%B1%9E%E6%80%A7
booleanfalse

Events 事件 ​

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

Slots 插槽 ​

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

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/biaodan/input-number

示例源码 ​

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">数字输入框 xInputNumber</x-text>
			<x-text color="#999999" >定义多样化,属性几乎与xInput一样，唯一不同的是这个只能数字，所以更多dmeo样式见xInput页面</x-text>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18"  class="text-weight-b ">仅能输入整数</x-text>
		</x-sheet>
		<x-sheet>
			<x-input-number :show-clear="true" v-model="(val as number)" darkBgColor="" ></x-input-number>
		</x-sheet>
		
		<x-sheet>
			<x-text font-size="18"  class="text-weight-b ">输入小数并保留小数位</x-text>
		</x-sheet>
		<x-sheet>
			<x-input-number type="digit" inputmode="decimal" v-model="(val2 as number)" darkBgColor="" >
				<template v-slot:inputLeft>
					<x-text color="primary" class="pl-16">投资金额:</x-text>
				</template>
				<template v-slot:inputRight>
					<x-text class="px-16">万元</x-text>
				</template>
			</x-input-number>
		</x-sheet>
		
		<x-sheet>
			<x-text font-size="18"  class="text-weight-b ">小数位长度2</x-text>
		</x-sheet>
		<x-sheet>
			<x-input-number  leftText="商品价格" rightText="元" type="digit" :decimalLen="3" inputmode="decimal" v-model="(val3 as number)" darkBgColor="" ></x-input-number>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18"  class="text-weight-b ">最小0，最大100</x-text>
		</x-sheet>
		<x-sheet>
			<x-input-number :min="0" :max="100" leftText="商品价格" rightText="元" type="digit" inputmode="decimal" v-model="(val4 as number)" darkBgColor="" ></x-input-number>
		</x-sheet>
	
		
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	const val = ref(3)
	const val2 = ref(3.3)
	const val3 = ref(8.000)
	const val4 = ref(8.0)
</script>

<style>
		
</style>
最近更新