spz-quantity

<spz-quantity
  layout="fixed-height"
  height="40"
  name="quantity"
  min="1"
  max="8"
  value="1"
  icon-class="quantity-buttons"
  number-class="quantity-input"
></spz-quantity>

An integer number is a current value. Its default value is 1.

The maximum value the value can increase to. Its default is Number.MAX_VALUE.

The minimum value the value can decrease to. Its default is Number.MIN_VALUE.

A class added to the plus and minus buttons.

A class added to the input element.

You can specify a corresponding the spz-variants id, and update the max, min and value of the spz-quantity through the variantChange event.

update(isTriggerChange=<Boolean>[, value=<Number>, min=<Number>, max=<Number>])

Specify an object to update the value, min, max, and isTriggerChange attributes of the current element.

• value: A number. Update the value attribute of the current element.
• min: A number. Update the min attribute of the current element.
• max: A number. Update the max attribute of the current element.
• isTriggerChange: A Boolean attribute. If its value is true, the element will trigger the quantityChange event.

<div id="text" class="hidden">The `quantityChange` event is triggered.</div>

<spz-quantity
  id="quantity"
  layout="container"
  value="8"
  min="1"
  max="12"
  @quantityChange="text.toggleClass(class='hidden', force=false);"
></spz-quantity>

<button
  type="button"
  @tap="quantity.update(min=2, max=20, value=11, isTriggerChange=true);"
>
  Update quantity
</button>

{
  "value": 2, // the current value
  "originData": { // original data
    "value": 2
  }
}

Be automatically triggered when the quantity is changed.

Be automatically triggered when the quantity changes to minimum value.