3. 获取及修改组件已有属性

视频介绍

大家好，欢迎大家回到山海鲸的二开系列教程。今天，我们来看一下 extension 类上的一些内置属性，主要讲解两个比较重要的属性：element 和 project。

一、回顾上节课代码
我们先回顾一下上节课的代码。这段代码是从软件中直接拷贝出来的示例代码，其中包含了一个调用代码示例，我们可以直接将其拷贝出来使用。

代码示例中，有一个 this.element 的调用。当我们将此类挂载到组件上时，this.element 属性就直接指向了当前组件。通过 element，我们可以调用如 get option、set option、add event listener 等方法，后续我们还会详细展开这些方法的使用。

二、内置属性详解
1. element 属性
element 属性指向当前组件，它具有以下重要方法和用途：

数据相关方法：get option、set option 等，数据相关方法将在数据章节专门讲解。
事件相关方法：add event listener、remove event listener 和主动触发事件等。
其他方法：如 get children、get parent 等，用于获取整个图层数，但这些方法平时使用较少。
2. project 属性
对于每一个 element 来说，它都属于一个大的 project。project 属性最重要的方法是 get valuable 和 set valuable。

项目参数：在项目设置中有一个项目参数选项。项目参数主要用于设置一些变量，这些变量可以用于控制数据库等。例如，可以通过数据参数直接控制后端数据的筛选，而不是在前端筛选。在写 SQL 语句时，可以使用这些参数，如 select * from 表名 where 字段名 = 参数值，然后通过二开、URL 或交互等方式修改这个参数。当参数值被修改后，数据会自动刷新并带上这个参数值。这部分内容将在后续课程中详细讲解。

三、get option 和 set option 方法扩展
1. 确定属性格式
在使用 get option 和 set option 方法时，我们可能会遇到不知道属性格式的问题。其实，我们可以通过查看调用代码示例中的 set option 部分来确定属性的具体格式。

组件大小：是一个二维数组的格式，我们可以用一个二维数组去接收它。
图例项间隔：是一个纯粹的数字，我们可以直接用一个变量来接收，且知道它是 number 类型。
颜色：是一个字符串，通常用 16 进制的字符串来表达。
2. 特殊情况处理
（1）多选、单选或下拉类型
对于多选、单选或下拉类型的属性，我们可以通过先选中某个选项，然后查看调用代码示例来确定其背后的 value 值。例如，对于图例类型，如果我们想知道“翻页”对应的字符串值，可以先点击“翻页”，然后查看调用代码示例，发现“翻页”叫做 scroll。我们可以通过代码将其设置成 scroll，并查看效果。

typescript
// 示例代码：将图例类型设置为翻页
ready() {
this.element.setOption(['legend', 'type'], 'scroll');
}
（2）复杂类型
对于文本样式等复杂类型，我们可以通过查看调用代码示例，发现它实际上是一个 JSON 字符串。如果我们想改变其中的某个值，如 size，就需要构建一个完整的 JSON 字符串。我们可以通过解构的方式获取其中的某个值，例如：

typescript
// 示例代码：获取并解构复杂类型的 size 值
const option = this.element.getOption(['textStyle']);
if (option) {
const { size } = JSON.parse(option);
console.log('当前字体大小:', size);
}
四、监听属性变化
当我们设置完 set option 后，有时希望在样式的值被改变时，二开代码能够得到消息。我们可以通过 element 上的 add event listener 方法来监听属性的变化。需要注意的是，必须先读取过这个 option 字段，才能监听到它的变化。

示例代码
typescript
// 示例代码：监听 position 属性的变化
ready()