列表选择框

该组件提供待选值列表，开发者可以配置列表值的内容，和默认选中值。当选择后返回选择的值给回调函数。

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

  • callback返回值

    callback的返回值，可开发者提供的待选值列表的数据格式有观。

    假如提供的待选值数组如下：

    [
    { "lable": "无", "value":false },
    { "lable": "标准", "value": true },
    { "lable": "小时", "value": 123 },
    { "lable": "星期", "value": "week"},
    ]

    选择第一项的时候callback的返回值：{"ngvModel":false}

    选择第二项的时候callback的返回值：{"ngvModel":true}

    选择第三项的时候callback的返回值：{"ngvModel":123}

    选择第四项的时候callback的返回值：{"ngvModel":"week"}

  • customInput下可以配置的属性：

属性类型值备注
ngvModelany默认数值，上例中所示，假如要将“星期”作为默认待选值，这里可以设置为"week"
labelNameString展示值的属性名，如上例中的“lable”
valueNameString实际值的属性名，如上例中的“value”
ngvHeightString下拉列表的高度值，如：“100px"
ngvSelectsArray待选值列表，为数组，如果需要后端请求，这里可以为一个空数组。

例如：

{
"develop":{
"html":"index.html",
"css":["./styles/index.css"],
"entry":"./scripts/main.js",
"scripts":{
}
},
"plugins":[],
"services":[],
"libs":[],
"customAttributes":{
"pro":[
{
"type":"WidgetSelect",
"name":"下拉列表",
"customInput":{
"ngvSelects":[
{ "lable": "无", "value": "nothing" },
{ "lable": "标准", "value": "standard" },
{ "lable": "小时", "value": "hour" },
{ "lable": "星期", "value": "week"},
{ "lable": "日", "value": "day" },
{ "lable": "月", "value": "month" },
{ "lable": "年", "value": "year" },
{ "lable": "年-月-日", "value": "1" },
{ "lable": "年-月", "value": "2" },
{ "lable": "年-月-日 时:分:秒:毫秒", "value": "3" },
{ "lable": "月-日", "value": "4" },
{ "lable": "月-日 时:分:秒", "value": "5" },
{ "lable": "时:分:秒:毫秒", "value": "6" },
{ "lable": "时:分:秒", "value": "7" },
{ "lable": "时:分", "value": "8" }
],
"ngvModel":"standard",
"labelName":"lable",
"valueName":"value",
"ngvHeight":"100px"
},
"callback":"selectChanged"
},
],
"con":[
]
}
}

main.js:

(function(){
return {
...,
selectChanged(data){
//右侧属性栏选择“标准”
console.log('selectChanged://////')
console.log(data)
//控制台打印：{"ngvModel":"standard"}
}
...
}
})

待选值列表后端请求

有些待选值列表可能需要调用后端请求，此时可以不在ngvSelects中配置待选值。

{
"develop":{
"html":"index.html",
"css":["./styles/index.css"],
"entry":"./scripts/main.js",
"scripts":{
}
},
"plugins":[],
"services":[],
"libs":[],
"customAttributes":{
"pro":[
{
"type":"WidgetSelect",
"name":"下拉列表",
"customInput":{
"ngvSelects":[],//这里留空
"ngvModel":"standard",
"labelName":"lable",
"valueName":"value",
"ngvHeight":"100px"
},
"callback":"selectChanged"
},
],
"con":[
]
}
}

在main.js中增加调用后端请求的方法，下面的示例中通过setTimeout来模拟请求后端接口所产生的异步。

(function(options){
// var $eventDispatch=window.services.$eventDispatch;
return {
properties:null,
$eventDispatch:window.services.$eventDispatch,
onInit(_properties){
this.properties=_properties;
this.requestData().then(data=>{
this.properties.config.customAttributes.pro[0].customInput.ngvSelects=data;
let params={
pro:this.properties.config.customAttributes.pro[0],
key:"ngvSelects",
index:0
}
this.$eventDispatch.notifyDataChanged(`AttributesUpdate:_#visroot#_`,params)
})
},
requestData(){
return new Promise((success,error)=>{
setTimeout(()=>{
let list=[
{ "lable": "无", "value": "nothing" },
{ "lable": "标准", "value": "standard" },
{ "lable": "小时", "value": "hour" },
{ "lable": "星期", "value": "week"},
{ "lable": "日", "value": "day" },
{ "lable": "月", "value": "month" },
{ "lable": "年", "value": "year" },
{ "lable": "年-月-日", "value": "1" },
{ "lable": "年-月", "value": "2" },
{ "lable": "年-月-日 时:分:秒:毫秒", "value": "3" },
{ "lable": "月-日", "value": "4" },
{ "lable": "月-日 时:分:秒", "value": "5" },
{ "lable": "时:分:秒:毫秒", "value": "6" },
{ "lable": "时:分:秒", "value": "7" },
{ "lable": "时:分", "value": "8" }
];
success(list);
},1000)
})
},
setData(data){
},
onDestroy(){
console.log('销毁');
}
}
})

上述代码中我们在return 对象中增加了$eventDispatch属性，并把window.services.$eventDispatch这个服务赋值给了$eventDispatch

$eventDispatch是云视界内部的事件订阅服务，想用这个服务，必须在config.json下的services下增加配置：

{
...
"plugins":[],
"services":["$eventDispatch"],//增加$eventDispatch服务
...
}

然后我们增加了requestData方法，来模拟http请求。在初始化钩子函数onInit中调用这个方法。

this.properties.config.customAttributes.pro[0].customInput.ngvSelects=data;

这一句是查找到在properties下存储的属性栏配置文件，给对应的属性赋值。

this.properties.config.customAttributes.pro对应的就是config.json下customAttributes.pro。

这里的pro[0]是当前下拉框在customAttributes.pro中的序号。

下面的代码就是在告诉云视界需要对这个属性栏组件的ngvSelects属性做入参更新

  • params.pro是当前操作的属性栏组件的配置

  • params.key是操作的是组件的属性

  • params.index是当前属性栏在customAttributes.pro的序号。

  • AttributesUpdate:_#visroot#_是更新事件的事件名。 该更新方法可以通过$customService下的updateRightBarWidgetData达到同样的效果，

Edit this page