数量选择器 Counter

本组件从v0.6.4版本更名为Counter

基础用法

通过count属性设置起始数量,默认值为1

通过min属性设置最小数量,默认值为1

通过max属性设置最大数量,默认值为10000

基础用法

示例代码

  1. <l-counter count="1"
  2. min="1"
  3. max="10"/>

设置数量增减步长

通过step属性设置数量增减步长,默认值为1

设置数量增减步长

示例代码

  1. <l-counter count="1"
  2. min="1"
  3. max="10"
  4. step="2"/>

设置禁用状态

通过disabled属性设置数量选择器禁用状态。默认值为false

设置禁用状态

示例代码

  1. <l-counter count="1"
  2. min="1"
  3. max="10"
  4. disabled="{{true}}"/>

数量选择器属性(Counter Attributes)

TIP

  1. 如果需通过l-count-class或者l-class修改height,请同时设置line-heightmin-height并与height大小保持一致。
  2. l-disabled-classl-symbol-class为互斥关系。
参数说明类型可选值默认值
count设置起始数量Number—-1
min设置最小数量Number—-1
max设置最大数量Number—-10000
step设置数量增减步长Number—-1
disabled设置禁用状态Boolean—-false
is-hover是否显示hover效果Boolean—-true

数量选择器外部样式类 (Counter ExternalClasses)

外部样式类名说明备注
l-class设置数量选择器整体容器的外部样式类—-
l-symbol-class设置数量选择器加(减)号容器的外部样式类—-
l-disabled-class设置数量选择器数字容器禁用状态的外部样式类—-
l-count-class设置数量选择器数字容器的外部样式类—-

数量选择器事件(Counter Events)

事件名称说明返回值备注
bind:lintap点击加(减)号及数字输入框失去焦点触发的事件{count,type}type值为reduceaddblur
bind:linout数字超出可选范围触发的事件{type,way}type值为overflow_minoverflow_max,way值为iconinputparameter

TIP

way值介绍:

  1. icon为点击加(减)号触发的超出事件。
  2. input为输入框数字超出事件。
  3. parameter为输入的参数导致的超出事件。