二维项目制作和私有化部署全流程免费,无水印,不限制数量 点击下载

5. 自定义属性面板(2)进阶属性

视频介绍

欢迎大家回到山海鲸二次开发系列教程。

在上一节课程中,我们讲解了最基础的三种自定义属性。而本节课程,我们将进一步深入,介绍一些需要通过类定义的进阶自定义属性。

一、进阶属性的基本概念
以“数字拖动条”为例,该属性与基础数字类型相似,但相比之下,它不仅包含输入框,还可附带拖动条、单位显示等功能,展现形式更为丰富。
与基础属性不同的是,进阶属性必须通过类进行定义。例如:数字拖动条使用 Decimal 类来定义。类似的还有 Vector、File、Font 等高级属性,它们都需用特定的类来初始化默认值。

通常,类初始化时会包含两个部分:
default:默认值;
设置项:例如最大值、最小值、步长、单位、是否显示输入框及输入框宽度等。
我们通过数字拖动条来演示进阶自定义属性面板的实际效果。

二、数字拖动条属性演示
在代码注释区中,可以找到 Decimal 的使用示例。将相关代码复制到项目中,刷新页面后,即可在面板中看到数字拖动条组件。此时,可以通过左侧拖动条或右侧输入框改变数值,两个部分会同步更新。

三、获取属性值的方法
与基础属性不同,进阶属性的值获取方式略有不同。在访问属性值时,必须通过 .value 来获取。
例如:
if (property === 'debug11') {
console.log(this.debug11.value);
}
如果直接使用 this.debug11 是无法正确获取值的,必须调用 .value。

四、其他进阶属性说明
1. 向量(Vector)
向量属性支持多个数值,因此其 default 通常是一个数组。用户可设置多个维度的数据,用于表示坐标、尺寸等信息。具体配置项可参考文档内容进行调试。

2. 下拉选项(Select)
下拉菜单属性包含 value 和 label。其中 label 是用户界面中展示的文字,value 是程序实际获取的值。
若 isMultiple = false,返回的值为单个值;
若 isMultiple = true,返回的值为一个数组。

3. 字体(Font)
字体属性的值是一个对象,包含字体样式的详细定义。如是否加粗(bold)、字体大小、字体名称等。可以通过属性配置是否展示加粗、斜体等样式按钮。

4. 段落(Paragraph)
段落属性是字符串的进阶形式,主要配置项为行数,用于多行文本的输入与展示。

5. 颜色(Color)
颜色属性使用 16 进制字符串表示,提供颜色选择器功能,返回值为用户选择的颜色代码。

五、总结
进阶自定义属性面板相比基础属性,最大的区别在于需要通过类来定义默认值,并可同时配置丰富的展示属性。
在获取属性值时,也需要通过 .value 来访问,不能直接使用属性名称。
本节课程到此结束,感谢大家的学习。后续我们将继续介绍更多二次开发相关内容及接口使用,敬请期待。