颜色组件

  • 该组件可以设置颜色和渐变色
属性值备注
typeGradientColor显示颜色和渐变色
name属性名，可以自定义名称，不要超过4个字，否则会折行。
callbackstring/obj可以直接配置回调函数名或一个对象。
当配置callback为回调函数名时，回调函数会接收一个返回值。格式：{ngvModel:'rgba(255,255,255)'}
当配置为对象时，具体用法请看尺寸组件下面的callback配置为object
  • 开发者如果想通过这个组件来改变外壳组件的背景颜色，可以直接设置：

config.json中添加

{
...
"customAttributes":{
"pro":[
{
"type":"GradientColor",
"name":"背景颜色"
}
],
"con":[]
}
...
}

进行调试后，在右侧属性栏可以看到增加了颜色组件。

Application

我们没有添加入参，该组件默认控制的是自定义外壳组件的背景颜色。更改颜色后，自定义外壳组件的背景颜色发生变化。

  • 如果开发者希望通过这个颜色组件，来改变自己内部的某部分的颜色，可以再配置customInput属性，增加入参值,同时要配置callback，来获取颜色值。

callback下的ngvModel，与customInput下的ngvModel保持一致。

  • customInput下可以配置的属性：
属性类型值备注
ngvModel字符串rgb(255,255,255)支持RGBA颜色值，十六进制颜色值#ffffff
{
...
"customAttributes":{
"pro":[
{
"type":"GradientColor",
"name":"内部颜色",
"customInput":{
"ngvModel":"#007733"
},
"callback":{
"ngvModel":"colorChange"
}
}
],
"con":[]
}
...
}

main.js中

(function(){
return{
$data:{
properties:null
},
$hooks:{
onInit(properties){
this.properties=properties;
},
onDestroy(){
},
setData(){
},
outSizeCallBack(){
}
},
$methods:{
colorChange(color){
console.log(color)//#000000
}
}
}
})

Application

最终属性栏显示如上图所示，属性组件展示的绿色是我们传入的，改变颜色组件的颜色时，背景颜色也不会变化了。 这时需要开发者根据自己需要，在colorChange函数中添加代码，让自己想要控制的div改变颜色。

Edit this page