面板组件 : 标签

标签组件是一个简单的文本标签,用于显示一行文本。

标签

属性配置

  • ID : 组件ID,可用于在脚本或模板中引用该组件。
  • 文本 :设置标签组件的文本内容。
  • 链接 : 设置标签组件的链接地址。
  • 脚本 : 定义组件事件处理函数或其他功能函数。
  • 坐标X : 设置标签坐标X取值。
  • 坐标Y : 设置标签坐标Y取值。
  • 坐标Z : 设置标签坐标Z取值。
  • 高度 : 设置标签高度取值。
  • 宽度 : 设置标签宽度取值。
  • 颜色 : 设置标签颜色取值。
  • 大小 : 设置标签字体大小取值。
  • 粗细 : 设置标签字体粗细取值。
  • 水平对齐 : 设置标签水平对齐方式取值。
  • 垂直对齐 : 设置标签垂直对齐方式取值。

脚本

脚本上下文 $this

$this 为当前组件实例,您可以通过 $this 对象调用组件的各种方法。

▲ 组件初始化

void init()

当组件存在init方法时,组件初始化时会调用该方法。

脚本示例:

export function init() {
    // your code here
}

▲ 设置/获取当前文本

string text(string text)

请求参数:

  • text : <字符串> 可选项, 设置当前标签文本。

返回值:<字符串> 当前标签文本

模板示例:

{{$widget("label").text()}}

脚本示例:

$this.text("Hello World");

▲ 设置/获取当前文本颜色

string color(string color)

请求参数:

  • color : <字符串> 可选项, 设置当前标签文本颜色。

返回值:<字符串> 当前标签文本颜色

脚本示例:

$this.color("red");

▲ 设置/获取当前文本大小

string fontSize(string fontSize)

请求参数:

  • fontSize : <字符串> 可选项, 设置当前标签文本大小。

返回值:<字符串> 当前标签文本大小

脚本示例:

$this.fontSize("20px");

▲ 设置/获取当前文本粗细

string fontWeight(string fontWeight)

请求参数:

  • fontWeight : <字符串> 可选项, 设置当前标签文本粗细。

返回值:<字符串> 当前标签文本粗细

脚本示例:

$this.fontWeight("bold");

▲ 设置/获取当前水平对齐方式

string align(string align)

请求参数:

  • align : <字符串> 可选项, 设置当前标签水平对齐方式。

返回值:<字符串> 当前标签水平对齐方式

脚本示例:

$this.align("center");

▲ 设置/获取当前垂直对齐方式

string verticalAlign(string verticalAlign)

请求参数:

  • verticalAlign : <字符串> 可选项, 设置当前标签垂直对齐方式。

返回值:<字符串> 当前标签垂直对齐方式

脚本示例:

$this.verticalAlign("middle");

脚本上下文 $panel

$panel 对象为当前面板实例,您可以通过 $panel 对象调用面板的各种方法。

▲ 设置/获取变量

string variable(string name, string value=undefined)

请求参数:

  • name : <字符串> 必选项, 变量名称。
  • value : <字符串> 可选项, 设置变量值。

返回值:<字符串> 变量值

脚本示例:

// 设置变量值
$panel.variable("name", "value");

// 获取变量值
let value = $panel.variable("name");

▲ 获取组件实例

object widget(string id)

请求参数:

  • id : <字符串> 必选项, 组件ID。

返回值:<对象> 组件实例

脚本示例:

// 获取组件实例
let widget = $panel.widget("switch");
// 获取开关值
let value = widget.value();

脚本上下文 $

脚本上下文 $ 是一个全局对象, 包含常用的全局函数和对象。

▲ 延时给定的毫秒数

async msleep(Integer ms)

例如 :

await $.msleep(1000);

▲ 显示确认对话框

async confirm(String message)

确认对话框

参数:

  • message : 消息内容

返回值: 如果用户点击了确认按钮,则返回 true,否则返回 false

例如 :

let confirmed = await $.confirm("Are you sure?");
if ( confirmed ) {
    $.alert("yes");
} else {
    $.alert("no");
}

▲ 显示消息对话框

async alert(String message, String type=undefined)

消息对话框

参数:

  • message : 消息内容
  • type : 消息类型,可选值为 errorwarning, alert。默认为 alert

例如 :

$.alert("hello world");
// 显示错误信息
$.alert("hello world", "error");
// 显示警告信息
$.alert("hello world", "warning");

▲ 显示Toast消息

async toast(String message, String type=undefined)

Toast消息

参数:

  • message : 消息内容
  • type : 消息类型,可选值为 success, errorwarning, info。默认为 info

例如 :

$.toast("hello world");
// 显示错误信息
$.toast("hello world", "error");
// 显示警告信息
$.toast("hello world", "warning");

▲ 显示通知消息

async notify(String title, String message, String type=undefined)

通知消息

参数:

  • title : 消息标题
  • message : 消息内容
  • type : 消息类型,可选值为 success, errorwarning, info。默认为 info

例如 :

$.notify("hello", "hello world");
// 显示错误信息
$.notify("hello", "hello world", "error");
// 显示警告信息
$.notify("hello", "hello world", "warning");

▲ 生成随机数

Integer random(Integer min, Integer max)

参数:

  • min : 最小值
  • max : 最大值

返回值: 生成的随机数

例如 :

let value = $.random(1, 100);

▲ 生成随机字符串

String randomString(Integer length)

参数:

  • length : 字符串长度

返回值: 生成的随机字符串

例如 :

let value = $.randomString(10);

▲ 执行指令

async execute(String name, Any params)

例如 :

let response = await $.execute(
    "文件夹/指令名称",  // 指令路径
    {"name": "sige"} // 指令参数
);

// 等待1秒,用于等待指令执行完成
await $.msleep(1000); 

// 读取指令执行结果
let text = response.readAs('text');
// 结束指令执行
response.cancel();

▲ 调用指令

async call(String name, Any params)

调用和执行指令的区别是, 调用模式下会在接收到响应内容后立即返回, 而执行模式下会持续接收响应内容。

例如 :

let response = await $.call(
    "文件夹/指令名称",  // 指令路径
    {"name": "sige"} // 指令参数
);

▲ 获取环境变量

String env(String name, defaultValue=nul)

根据给定的环境变量名称获取环境变量的值, 当环境变量不存在时返回默认值。

例如 :

let value = $.env("name");

// 获取环境变量,如果不存在则返回默认值
let value = $.env("name", "default");
2025 © Bittly 沪ICP备2023006101号-2