当前位置：网站首页 > 技术文章 > 正文

山海鲸属性面板二次开发(下):类定义在进阶属性中的深度应用

zhezhongyun 2025-06-19 02:09 2 浏览

点击链接可查看演示视频：【山海鲸可视化二次开发】第5课自定义属性面板（2）进阶属性_哔哩哔哩_bilibili

欢迎大家回到山海鲸二次开发系列教程。在上一节课程中，我们讲解了最基础的三种自定义属性。而本节课程，我们将进一步深入，介绍一些需要通过类定义的进阶自定义属性。

一、进阶属性的基本概念

以“数字拖动条”为例，该属性与基础数字类型相似，但相比之下，它不仅包含输入框，还可附带拖动条、单位显示等功能，展现形式更为丰富。

与基础属性不同的是，进阶属性必须通过类进行定义。例如：数字拖动条使用 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 来访问，不能直接使用属性名称。

本节课程到此结束，感谢大家的学习。后续我们将继续介绍更多二次开发相关内容及接口使用，敬请期待。

font 属性

上一篇：28、VBA零碎技巧，字体设置与合并单元格(零基础入门)
下一篇：办公小技巧:PPT制作实时反馈题（办公小技巧提高效率）

山海鲸属性面板二次开发(下):类定义在进阶属性中的深度应用

一、进阶属性的基本概念

二、数字拖动条属性演示

三、获取属性值的方法

四、其他进阶属性说明

五、总结

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?