跳到主要内容

步进器 InputNumber

步进器由增加按钮、减少按钮和输入框组成,用于输入范围内的数值

用法示例

基本用法

<ti-input-number id="ti-input-number" onchange="onChange(event)"></ti-input-number>

步进器尺寸

<ti-input-number size="medium"></ti-input-number>
<ti-input-number size="big"></ti-input-number>

步进器风格

<ti-input-number variant="pure"></ti-input-number>
<ti-input-number variant="block"></ti-input-number>
<ti-input-number variant="bright"></ti-input-number>

自适应宽度

<ti-input-number auto-width></ti-input-number>

步进器步长

<ti-input-number step="5"></ti-input-number>

步进器禁用和只读

<ti-input-number disabled></ti-input-number>
<ti-input-number disabled-input></ti-input-number>
<ti-input-number read-only></ti-input-number>
<ti-input-number read-only-input></ti-input-number>

边框

<ti-input-number variant="pure" border></ti-input-number>
<ti-input-number variant="block" border></ti-input-number>

收起状态

<ti-input-number thumbnail></ti-input-number>

ti-input-number API

属性 Properties

名称类型必填默认值说明备注
sizestringmedium数字输入框的尺寸,可选值为 medium big-
borderbooleanfalse是否添加外边框variant:bright模式下border无效
variantstringpure数字输入框的风格,可选值为 pure block bright-
roundbooleanfalse按钮为圆形-
input-widthnumber-输入框宽度,默认单位为 px-
auto-widthbooleanfalse宽度自适应-
valuenumber | string-输入值-
stepnumber1步长-
minnumberNumber.MIN_SAFE_INTEGER最小值-
maxnumberNumber.MAX_SAFE_INTEGER最大值-
disabled-inputbooleanfalse是否禁用输入,只能通过按钮操作-
async-changebooleanfalse是否开启异步变更,开启后需要手动控制输入值-
thumbnailbooleanfalse是否收起输入框-
disabledbooleanfalse是否禁用,全部禁用,包括按钮-
read-onlybooleanfalse是否只读,全部只读,包括按钮-
read-only-inputbooleanfalse是否只读,只输入框只读,按钮仍然可以操作-
integerbooleanfalse限制输入整数-
init-only-plusbooleanfalse如果设置 true,value 值为 0,初始状态仅显示加号仅在variant:bright模式下有效
ext-stylestring | Record<string, string>-根节点样式-

事件 Events

名称参数列表描述备注
change(e: CustomEvent) => void当绑定值变化时触发的事件-
plus(e: CustomEvent) => void点击增加按钮时触发时触发-
minus(e: CustomEvent) => void点击减少按钮时触发时触发-
focus(e: CustomEvent) => void输入框聚焦时触发-
blur(e: CustomEvent) => void输入框失焦时触发-
overlimit(e: CustomEvent) => void超出最大值时点击触发-
click-input(e: CustomEvent) => void点击输入框时触发-

外部样式类 External Classes

名称说明备注
ext-class根节点样式类-
ext-minus-class减号按钮样式类-
ext-input-class输入框样式类-
ext-plus-class加号按钮样式类-

CSS 变量 CSS Variable

变量默认值说明备注
--input-number-size48rpx按钮的宽高,默认相等-
--input-number-border-color#c4c4c4边框模式下,边框的颜色-
--input-number-radiuscalc(var(--capsule-radius-size, 0rpx) + 8rpx)按钮圆角-
--capsule-radius-size0rpx全局圆角增量,控制图标风格。在项目根节点统一设置-