spz-quantity 数量选择器
通过鼠标或键盘，输入范围内的数值。
布局
跳转到“布局”何时使用
跳转到“何时使用”当需要获取标准整数数值时。
代码演示
跳转到“代码演示”基本用法
跳转到“基本用法”简单的数据选择器。
<spz-quantity layout="fixed" width="200" height="52"></spz-quantity>超出边界
跳转到“超出边界”自定义最大值、最小值，当超出边界时，按钮继续点击会触发对应的事件。
Status: In Range Overflow Underflow
<div class="quantity-status">
Status:
<span id="in-range">In Range</span>
<span id="overflow" hidden>Overflow</span>
<span id="underflow" hidden>Underflow</span>
</div>
<spz-quantity
layout="fixed"
width="200"
height="52"
min="1"
max="10"
value="3"
@quantityChange="in-range.show;overflow.hide;underflow.hide;"
@quantityChangeUnderflow="in-range.hide;overflow.hide;underflow.show;"
@quantityChangeOverflow="in-range.hide;overflow.show;underflow.hide;"
></spz-quantity>自定义图标
跳转到“自定义图标”使用 role 属性来自定义图标，可取值如下：
increase：表示增加按钮图标decrease：表示减少按钮图标
<spz-quantity
layout="fixed"
width="240"
height="52"
input-class="m-w-24"
>
<svg role="increase" ...><!-- ... --></svg>
<svg role="decrease" ...><!-- ... --></svg>
</spz-quantity>属性
跳转到“属性”| 属性名 | 说明 | 类型 | 默认值 | 是否必需 |
|---|---|---|---|---|
| value | 初始值 | number | 1 |
否 |
| max | 最大值 | number | Number.MAX_VALUE |
否 |
| min | 最小值 | number | Number.MIN_VALUE |
否 |
| icon-class | icon图标类名 | string | - | 否 |
| input-class | input输入框类名 | string | - | 否 |
方法
跳转到“方法”update
跳转到“update”更新当前数量值、最小值和最大值。
| 参数名 | 描述 | 类型 | 是否必需 |
|---|---|---|---|
| max | 最大值 | number | 否 |
| min | 最小值 | number | 否 |
| value | 更新数量的值 | number | 否 |
事件
跳转到“事件”quantityChange
跳转到“quantityChange”当数量值更改时自动触发该事件。
quantityChangeUnderflow
跳转到“quantityChangeUnderflow”当数量值更改低于最小值时自动触发该事件。（值不会被更改）
quantityChangeOverflow
跳转到“quantityChangeOverflow”当数量值更改高于最小值时自动触发该事件。（值不会被更改）