关于插件ui控件的吐槽

在html中通过vue绑定了一个startColor属性
在1.x版本中我可以使用 v-value=“startColor”,并且这个值是双向绑定,使用起来很简单

   <ui-color v-value="startColor"   @change="onChangeStartColor"></ui-color>

但是在我现在使用的2.0.5版本中必须 :value=“startColor” ,并且只是单向绑定

   <ui-color :value="startColor"   @change="onChangeStartColor"></ui-color>

需要我在事件中手动赋值

onChangeStartColor(event) {
    let value = event.currentTarget.value;
    let newColor = cc.color(value[0], value[1], value[2], value[3] );
    this.startColor = newColor.toString();
    // this.startColor = newColor.toCSS();// 有bug会抛出异常
}

并且这个color值,转换的我是一脸懵逼,到底正确的使用的姿势是什么呢?
文档太简陋,连个简单的使用例子都没有,其他控件都是个数值,这个控件的值稍微有点复杂,希望文档能多来点说明

目测是API的一个bug
测试代码为

    let color = cc.color(17,17,15,1);
    color.toCSS();

toCSS我并没有传递参数,输出为 #1111f
这个值是不正确的,正确的应该是 #11110f
通过调试发现是toHEX这个api的锅,没有补全2位导致的,忘大大们修复了

暂时解决办法

this.startColor = newColor.toCSS("#rrggbb");

正想把 ui-color 控件用在inspector里
但发现双向绑定怎么都会有问题…

尝试在console把控件抓出来看看有什么方法可以使用
但在inspector里似乎没办法写 <ui-color id='abc'> 这样来下id

请问大神有没有什么好方法

因为shadowdom的坑,你无法通过document.getElementByID
自己实现双向绑定吧,没得更好的办法

1赞

谢谢大神回覆 <3
目前只能自已实作双向绑定

透过以下方式,目前版本 2.4.4
template部份

<ui-color v-value="VarDrawColor"></ui-color>

代码部份

	props:
	{
		 target: { twoWay: true, type: Object, },

		 //------------------------------------
		 // dynamic properties, use watch to modify
		 //------------------------------------
		 VarDrawColor:
		 {
		 	default()
		 	{
		 		let c = this.target.DrawColor.value //从target取得预设值并转换
		 		let ary = [ c.r, c.g, c.b, c.a / 255 ]
		 		return ary
		 	}
		 }
	},
	watch:
	{
		VarDrawColor( vn, vo )
		{
 			let setter =
 			{
 				id: this.target.uuid.value, isSubProp: false,
 				path: "DrawColor", //实际在控件上的属性名称
 				type: this.target.DrawColor.type,
 				value: new cc.Color( vn[0], vn[1], vn[2], vn[3] * 255 )
 			}
            Editor.Ipc.sendToPanel( "scene","scene:set-property", setter )
		}
	},

如果未来有人用到,可以提供一点帮助

2赞

该主题在最后一个回复创建后14天后自动关闭。不再允许新的回复。