自定义属性面板

本教程主要介绍在山海鲸可视化大屏软件中如何通过二次开发代码自定义组件属性的操作过程，比如，我们可以通过代码控制组件的颜色、字体等样式，接下来以“按钮”组件为例进行说明。

1. 添加代码

详细的添加代码操作请参考二次开发入口教程。

2. 自定义设置项

2.1 Boolean 类型

Boolean 类型有两个值“true”和“false”，如果组件需要增加开关操作，可以设置这个类型的属性变量。
示例代码：

1
2
3
4

class Button{
  debug = true; //属性变量名是英文
}
export default Button;

【温馨提示】由于 JavaScript 的类没有任何类型，所以必须给属性变量赋值，如果不赋值，山海鲸软件就没有办法识别属性变量的类型。

2.2 String 类型

String 类型用于表示由 0 或多个 16 位 Unicode 字符组成的字符序列，即字符串。JavaScript 中的字符串可以用单引号或双引号标识。如果将属性变量设置成 String 类型，则在自定义设置项中会出现一个输入框。
示例代码：

1
2
3
4

class Button{
  debug = "";
}
export default Button;

2.3 Number 类型

Number 类型表示数字，如果将属性变量设置成 Number 类型，则在自定义设置项中会出现一个输入框。
示例代码：

1
2
3
4

class Button{
  debug = 123;
}
export default Button;

2.4 onPropertyChanged()

当属性变量被改变时会触发 onPropertyChanged()方法，通过该方法可以第一时间得到这个属性变量变化后的值，从而方便对这个属性变量做其他操作。
示例代码：

1
2
3
4
5
6
7
8
9

class Button{
  on = true;
  onPropertyChanged(key){ //当属性变量“on”的值被改变时触发方法
    if(key == "on"){
      this.on;
    }
  }
}
export default Button;

2.5 Private 属性

如果只想在类内部使用属性变量，不需要将属性变量展示在自定义设置项中，可以把它设置成 Private 属性，JavaScript 用“#”代表 Private 属性。例如，我们将“test”属性变量设置成 Private 属性后，在软件上就不会生成自定义设置项了。
示例代码：

1
2
3
4
5
6
7
8
9
10
11

class Button{
  #test = false; //给属性变量“test”设置Private属性

  on = true;
  onPropertyChanged(key){
    if(key == "on"){
      this.on;
    }
  }
}
export default Button;

2.6 中文属性变量

山海鲸软件也支持对二次开发代码中的属性变量使用中文名称，这样可以直观的将自定义属性展示在软件中，如果需要给客户定制二次开发代码，建议使用中文属性变量名。
示例代码：

1
2
3
4

class Button{
  开关 = true; //属性变量名是中文“开关”
}
export default Button;

3. 视频教程

请参看山海鲸可视化“二次开发-自定义属性面板”视频教程：
https://www.bilibili.com/video/BV1AR4y1o7SB/