# 数字输入

适用于输入数字等场景

# 概念说明

# 属性

组件通用属性请参见组件通用说明

  • 值:输入框的值。

  • 最小值:限制输入数值的最小值。

  • 最大值:限制输入数值的最大值。

  • 间隔:限制点击按钮或按上下键所增加或减少的量。

  • 精度:限制数字要保留的最小单位,整数、小数均可,如需要保留两位小数,则填入0.01

  • 占位符:为空时的提示文本。

  • 自动获取焦点:是否自动获取输入框的焦点。

  • 隐藏按钮:是否隐藏数值加减按钮。

  • 清除按钮:开启并在输入框有内容时会显示清除按钮。

  • 只读:正常显示,但禁止选择或输入。

  • 禁用:置灰显示,且禁止任何交互(焦点、点击、选择、输入等)。

  • 宽度:设置数字输入框宽度大小,可选占满、巨大、大、中型、正常、小、迷你。

  • 高度:设置数字输入框高度大小,可选占满、巨大、大、中型、正常、小、迷你。

# 事件

  • 鼠标事件:获得焦点后、失去焦点后。
  • 组件事件:输入时、验证时、改变后。
事件名 触发条件
聚焦后 输入框获得焦点后
失焦后 输入框失去焦点后
输入时 输入内容时
验证时 触发验证时
改变后 组件原有值发生变化后

# 样式

样式说明请参见组件通用说明

# 主题样式

  • background:输入框背景色,如 #223325。默认值#fff。
  • background-disabled:禁用状态输入框背景色,如 #223325。默认值#F7F8FA
  • color:输入框字体颜色,如 #223325。默认值#333。
  • color-disabled:禁用输入框字体颜色,如 #223325。默认值#999。
  • button-background:输入框上下按钮背景色,如 #223325。默认值none。
  • button-background-hover:鼠标hover到button时显示的背景色,如 #223325。默认值none。
  • button-background-active:输入框上下按钮点击时的背景色(激活状态),如 #223325。默认值none。
  • button-background-focus:输入框上下按钮聚焦时的背景色(选中状态),如 #223325。默认值none。
  • button-background-disabled:输入框上下按钮背景色(禁用状态),如 #223325。默认值none。
  • border-color:输入框边框背景色,如 #223325。默认值#e5e5e5。
  • border-color-hover:鼠标hover到输入框时边框的颜色值,如 #223325。默认值#4c88FF。
  • border-color-focus:鼠标聚焦到输入框时边框的颜色值,如 #223325。默认值#4c88FF。
  • border-color-disabled:当输入框是禁用状态时的边框颜色值,如 #223325。默认值#e5e5e5。
  • button-color:输入框按钮字体色,如 #223325。默认值#989898。
  • button-color-hover:输入框按钮字体色(hover状态),如 #223325。默认值#337EFF。
  • button-color-disabled:输入框按钮字体色(禁用状态),如 #223325。默认值#CCC。
  • height:输入框高度,如1px。默认值32px。
  • border-width:输入框边框宽度,如 1px。默认值1px。
  • box-shadow-focus-color:鼠标聚焦到输入框时边框的阴影颜色,如 #223325。默认值rgba(77, 136, 255, 0.2)。
  • box-shadow-focus:鼠标聚焦到输入框时边框的阴影效果值,如 2px 2px 2px 1px rgba(0, 0, 0, 0.2)。默认值0 0 0 2px rgba(77, 136, 255, 0.2)。
  • button-padding:输入框按钮边距,如1px 1px。padding包含4个值,按顺序是上边距、右边距、下边距、左边距,数值个数可以是1至4个。1个表示所有边距值都相等,2个表示上下同一个值左右同一个值,3个表示左右同一个值。默认值0 4px。
  • button-outline:输入框轮廓,如 1px ridge rgba(0, 0, 0, 0.2)。默认值none。
上次更新: 2023年06月27日