数值文本输入框

该组件可以作为数值类型的输入框,本身包含进度条,可以通过滑块来控制数值。也可以通过配置文件来关闭进度条的显示,可以设置最大值、最小值。

属性备注
typeSlideInputBarComponent
name属性名,可以自定义,不要超过4个字,否则会折行。
callbackstring/object可以直接配置回调函数名或一个对象。
当配置callback为回调函数名时,回调函数会接收一个返回值。格式:{ngvModel:"100"}
当配置为对象时,具体用法请看尺寸组件下面的callback配置为object
customInputobject可以配置入参值
  • callback返回值是字符串类型

    无论callback回调函数设置的是函数名还是对象,回调函数拿到返回值的时候,返回值都是字符串类型,开发者根据实际需要做相应处理。

    (function(){
    return {
    //假设numberCallback为配置的回调函数
    numberCallback(data){
    console.log(data);
    //控制台打印:"100"
    }
    }
    })
  • customInput下可以配置的属性:
属性类型备注
ngvModelNumber默认数值
nzMinNumber可输入的最小数
nzMaxNumber可输入的最大数
nzStepNumber步长:点击数值输入框右侧上下箭头时,更改的数值的大小
hideProgressBooleanfalsetrue:隐藏滑块,false:显示滑块

例如:

{
"develop":{
"html":"index.html",
"css":["./styles/index.css"],
"entry":"./scripts/main.js",
"scripts":{
}
},
"plugins":[],
"services":[],
"libs":[],
"customAttributes":{
"pro":[
{
"type":"SlideInputBarComponent",
"name":"进度",
"customInput":{
"nzMin":0,
"nzMax":100,
"nzStep":1,
"ngvModel":50,
"hideProgress":false
},
"callback":{
"ngvModel":"progressCallback"
}
},
],
"con":[
]
}
}

main.js:

(function(){
return {
...,
progressCallback(data){
//假设data为100
console.log(data);
//控制台打印:"100"
let data=parseFloat(data);
console.log(data);
//控制台打印:100
}
...
}
})