数值文本输入框
该组件可以作为数值类型的输入框,本身包含进度条,可以通过滑块来控制数值。也可以通过配置文件来关闭进度条的显示,可以设置最大值、最小值。
属性 | 值 | 备注 |
---|---|---|
type | SlideInputBarComponent | |
name | 属性名,可以自定义,不要超过4个字,否则会折行。 | |
callback | string/object | 可以直接配置回调函数名或一个对象。 当配置callback为回调函数名时,回调函数会接收一个返回值。格式:{ngvModel:"100"} 当配置为对象时,具体用法请看尺寸组件下面的callback配置为object |
customInput | object | 可以配置入参值 |
callback返回值是字符串类型
无论callback回调函数设置的是函数名还是对象,回调函数拿到返回值的时候,返回值都是字符串类型,开发者根据实际需要做相应处理。
(function(){return {//假设numberCallback为配置的回调函数numberCallback(data){console.log(data);//控制台打印:"100"}}})
- customInput下可以配置的属性:
属性 | 类型 | 值 | 备注 |
---|---|---|---|
ngvModel | Number | 默认数值 | |
nzMin | Number | 可输入的最小数 | |
nzMax | Number | 可输入的最大数 | |
nzStep | Number | 步长:点击数值输入框右侧上下箭头时,更改的数值的大小 | |
hideProgress | Boolean | false | true:隐藏滑块,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
}
...
}
})