Easy UI

Appearance

InputNumber 计数器 ​

仅允许输入标准的数字值，可定义范围

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-input-number.js";
</script>
js
import "easy-component-ui/ea-input-number";

自定义样式 ​

移步到 CSS Part。

基础用法 ​

查看代码
html
<ea-input-number value="1" min="1" max="10"></ea-input-number>

禁用状态 ​

disabled 属性接受一个 Boolean，设置为 true 即可禁用整个组件。

查看代码
html
<ea-input-number disabled></ea-input-number>

步进 ​

允许定义递增递减的步进控制

设置 step 属性可以控制步长。

查看代码
html
<ea-input-number value="5" step="2"></ea-input-number>

严格步进 ​

step-strictly 属性接受一个 Boolean，设置为 true 后，value 只能是 step 的倍数。

查看代码
html
<ea-input-number value="2" step="2" step-strictly></ea-input-number>

精度 ​

设置 precision 属性可以控制数值精度，接收一个 Number。

TIP

precision 的值必须是一个非负整数，并且不能小于 step 的小数位数。

查看代码
html
<ea-input-number value="1" step="0.1" precision="1"></ea-input-number>
<ea-input-number value="1" step="0.01" precision="2"></ea-input-number>

尺寸 ​

组件支持 large、default、small 三种尺寸（不指定默认为 default）。

查看代码
html
<ea-input-number size="large"></ea-input-number>
<ea-input-number size="default"></ea-input-number>
<ea-input-number size="small"></ea-input-number>

不显示控制按钮 ​

设置 controls 属性为 false 时，不显示加减控制按钮。

查看代码
html
<ea-input-number controls="false"></ea-input-number>

文本对齐 ​

设置 align 属性可以控制输入框内文本的对齐方式，支持 left、center、right，默认为 center。

查看代码
html
<ea-input-number align="left" value="10"></ea-input-number>
<ea-input-number align="center" value="10"></ea-input-number>
<ea-input-number align="right" value="10"></ea-input-number>

EaInputNumber API ​

EaInputNumber Attributes ​

参数说明类型可选值默认值
label输入框标签文本string—(空)
value当前值number—0
valueOnClear清空时使用的值number—-
min设置允许的最小值number—Number.MIN_SAFE_INTEGER
max设置允许的最大值number—Number.MAX_SAFE_INTEGER
required是否必填boolean—false
step计数器步长number—1
stepStrictly是否严格按 step 的倍数校验值boolean—false
precision值的小数精度（非负整数）number—0
size组件尺寸stringlarge | default | smalldefault
readonly原生 readonly 属性，是否只读boolean—false
disabled是否禁用boolean—false
controls是否显示加减控制按钮boolean—true
align文本对齐方式stringleft | center | rightcenter
nameinput 的 name / idstring—(空)
placeholder输入框占位文本string—(空)
inputmode原生 input 的 inputmode 属性string—(空)

EaInputNumber CSS Part ​

名称说明
container组件根容器
label标签文本
region输入区域容器
decrease减号按钮
prefix前缀插槽容器
input输入框
suffix后缀插槽容器
increase加号按钮

EaInputNumber Slots ​

名称说明
prefix输入框前置插槽，用于放置图标或文本
suffix输入框后置插槽，用于放置单位或图标

EaInputNumber Methods ​

方法名说明参数
focus聚焦输入框options?: FocusOptions
blur失焦输入框-
updateContainerClasslist更新容器 class-

EaInputNumber Events ​

事件名称说明回调参数(event.detail)
ea-change值发生变化时触发{ currentValue: number, oldValue: number }
focus输入框获得焦点时触发-
blur输入框失去焦点时触发-

EaInputNumber CSS Custom Properties ​

属性名说明默认值
--ea-input-number-width组件宽度150px
--ea-input-number-width-large大尺寸宽度180px
--ea-input-number-width-small小尺寸宽度120px
--ea-input-number-height组件高度32px
--ea-input-number-height-large大尺寸高度40px
--ea-input-number-height-small小尺寸高度24px
--ea-input-number-font-size字体大小var(--font-size-md)
--ea-input-number-font-size-large大尺寸字体var(--font-size-lg)
--ea-input-number-font-size-small小尺寸字体var(--font-size-sm)
--ea-input-number-border-color边框颜色var(--grey-300)
--ea-input-number-text-color文字颜色var(--grey-700)
--ea-input-number-operator-color操作按钮颜色var(--grey-500)
--ea-input-number-operator-bg-color操作按钮背景颜色var(--grey-100)
--ea-input-number-operator-disabled-color操作按钮禁用颜色var(--grey-300)
--ea-input-number-input-disabled-color输入框禁用文字颜色var(--grey-400)
--ea-input-number-input-disabled-bg-color输入框禁用背景颜色var(--grey-100)
--ea-input-number-active-color激活状态颜色var(--blue-500)
--ea-input-number-transition过渡动画时长var(--transition-normal)