Appearance
MosoweInputNumber组件
TIP
自定义number输入组件,基于el-input type=text 二次封装。
仅允许输入标准的数字值0~9及 负数符号- 、小数点. ,可定义范围。
触发相关校验会有相关提示,分为焦点存续期间内会自动消失的短时间提示和失去焦点才会消失的长时间提示。
基础用法
要使用它,只需要在 <mosowe-input-number>
元素中使用 v-model
绑定变量即可,变量的初始值即为默认值。默认不限制最大值和最小值。
TIP
当modelValue
传入无效的字符串到输入框时,即Number(modelValue) + '' === 'NaN'
,组件会将值重置为undefined
,输入框为空,返回值为undefined
。
最大最小值
通过设置max
和min
属性控制最大最小值。接收Number
类型。
当加减按钮进行数值操作,值处于临界值时,不会加/减值,加/减按钮不可点击,并有相关短时间提示。
当进行输入框输入时,输入值超过最大值,触发最大值校验会实时替换为最大值,并有相关短时间提示。
当进行输入框输入时,输入值小于最小值,触发最小值校验,并在触发change事件事更换为最小值,并有相关长时间提示。
禁用状态
disabled
属性接受一个 Boolean
,设置为true即可禁用整个组件。
步进
允许定义递增递减的步进控制
设置 step
属性可以控制步长。默认为1
严格步进
step-strictly
属性接受一个Boolean
。 如果这个属性被设置为 true
,则只能输入步进的倍数。 当输入值不为step
倍数时,会有相关长时间提示。
精度
设置 precision
属性可以控制数值精度,接收一个 Number
。默认为0(整数)。
TIP
precision
的值必须是一个非负整数,并且不能小于 step
的小数位数。
如果precision
带有小数或 小于0或小于step
的小数位数,组件将不显示。
当值达到精度限制时继续输入,则会有相关短时间提示。
不同尺寸
使用 size
属性额外配置尺寸,可选的尺寸大小为:large
或 small
,默认为default
不展示按钮
controls
属性接受一个Boolean
。 如果这个属性被设置为 false
则隐藏加减按钮
属性
props
属性名 | 类型 | 说明 | 默认 |
---|---|---|---|
modelValue | number | 值 | - |
max | number | 最大值 | - |
min | number | 最小值 | - |
size | 'large' | 'default' | 'small' | 尺寸 | 'default' |
step | number | 计数器步长 | 1 |
stepStrictly | boolean | 是否只能输入 step 的倍数 | false |
precision | number | 精度,必须是一个非负整数,并且不能小于 step 的小数位数,默认整数 | 0 |
disabled | boolean | 禁用 | false |
readonly | boolean | 只读 | false |
controls | boolean | 是否使用控制按钮 | true |
placeholder | string | 占位文案 | '请输入' |
emits
事件 | 说明 | 类型 |
---|---|---|
input | 在 Input 值改变时触发 | Function:(data:number|undefined)=>void |
change | 仅当 modelValue 改变时,当输入框失去焦点或用户按Enter时触发 | Function:(data:number|undefined)=>void |
focus | 当选择器的输入框获得焦点时触发 | Function:(event: FocusEvent) => void |
blur | 当选择器的输入框失去焦点时触发 | Function:(event: FocusEvent) => void |
贡献者
mosowe