Cuttlefish Docs
  • 简体中文

    • spz-quantity 数量选择器

    何时使用

    当需要获取标准整数数值时。

    代码演示

    基本用法

    简单的数据选择器。

    <spz-quantity layout="fixed" width="200" height="52"></spz-quantity>

    超出边界

    自定义最大值、最小值，当超出边界时，按钮继续点击会触发对应的事件。

    <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初始值number1否
    max最大值numberNumber.MAX_VALUE否
    min最小值numberNumber.MIN_VALUE否
    icon-classicon图标类名string-否
    input-classinput输入框类名string-否
    disabled-dj-event当存在此属性时，数量变化不会触发dj.variantChange事件--否
    autocomplete用来开启/关闭输入框的自动填充"on" | "off"on否

    方法

    update

    更新当前数量值、最小值和最大值。

    参数名描述类型是否必需
    max最大值number否
    min最小值number否
    value更新数量的值number否

    事件

    quantityChange

    当数量值更改时自动触发该事件。

    quantityChangeUnderflow

    当数量值更改低于最小值时自动触发该事件。（值不会被更改）

    quantityChangeOverflow

    当数量值更改高于最小值时自动触发该事件。（值不会被更改）

    AI 摘要（LLM Ready）

    • 组件标识：spz-quantity
    • 用途一句话：通过鼠标或键盘，输入范围内的数值。
    • 可识别属性条目：7
    • 可识别方法小节：1
    • 可识别事件小节：3
    • 关键属性名（Top）：value、max、min、icon-class、input-class、disabled-dj-event
    • 关键方法名（Top）：update
    • 关键事件名（Top）：quantityChange、quantityChangeUnderflow、quantityChangeOverflow
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/