ea-ui

InputNumber 计数器 ​

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

引入 ​

js

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

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础用法 ​

查看代码
html
<div class="row left">
  <ea-input-number></ea-input-number>
</div>

禁用状态 ​

查看代码
html
<div class="row left">
  <ea-input-number disabled></ea-input-number>
</div>

限制值 ​

查看代码
html
<div class="row left">
  <ea-input-number min="1" max="10"></ea-input-number>
</div>

步数 ​

查看代码
html
<div class="row left">
  <ea-input-number step="2"></ea-input-number>
</div>

严格步数 ​

查看代码
html
<div class="row left">
  <ea-input-number step="3" step-strictly></ea-input-number>
</div>

精度 ​

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

查看代码
html
<div class="row left">
  <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>
</div>

尺寸 ​

额外提供了 medium、small、mini 三种尺寸的数字输入框

查看代码
html
<div class="row left">
  <ea-input-number></ea-input-number>
  <ea-input-number size="medium"></ea-input-number>
  <ea-input-number size="small"></ea-input-number>
  <ea-input-number size="mini"></ea-input-number>
</div>

Attributes ​

参数说明类型可选值默认值
value默认值number—0
disabled是否禁用计数器boolean—false
step计数器步长number—1
step-strictly是否只能输入 step 的倍数boolean—false
min/max设置计数器允许的最小值/最大值number—±Infinity
precision设置计数器数值精度，需要 step-strictly 为 true 时才生效number—0
size计数器尺寸stringmedium / small / minimedium

CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container外层容器
minus-wrap减号容器
input输入框
plus-wrap加号容器

Events ​

事件名称说明回调参数
change当输入框的值改变时触发的事件(event: Event)
blur当 input 失去焦点时触发(event: Event)
focus当 input 获得焦点时触发(event: Event)