组件：垂直标签框

垂直标签框组件用于创建垂直排列的导航菜单，支持多级菜单结构（主菜单项可带子菜单项），子菜单以向右弹出方式展示。支持自定义悬停颜色、选中项管理，并提供主菜单和子菜单的单击回调事件。适用于后台管理侧边栏、分类导航、功能切换等需要垂直导航的场景。

典型使用场景：

• 后台管理系统侧边菜单（仪表盘、用户管理、系统设置等）
• 分类导航（产品分类、文章栏目）
• 功能切换面板（工具集、模块列表）
• 多级菜单导航（带子菜单的层级结构）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

样式美化参考

垂直标签框的样式主要通过以下属性和继承属性调整：

• 悬停效果：
  • 点燃颜色：鼠标悬停时文本的颜色。
  • 点燃背景色：鼠标悬停时菜单项的背景色。
• 整体容器：通过 宽度、高度、背景颜色、边框、边框圆角 等继承属性调整菜单容器外观。
• 菜单项样式：菜单项的字体、内边距等由组件内部控制，可通过 CSS 类间接覆盖。
• 选中状态：当前选中的菜单项会自动高亮（样式由组件默认主题控制）。

基础示例

创建一个带三个主菜单项的垂直导航，其中第二项带有子菜单。

变量 垂直标签框1 = 创建 垂直标签框()
垂直标签框1.左边 = 50
垂直标签框1.顶边 = 50
垂直标签框1.宽度 = 200
垂直标签框1.点燃颜色 = "#1890ff"
垂直标签框1.点燃背景色 = "#e6f7ff"

' 添加菜单项
垂直标签框1.添加项目("控制台", "console")
垂直标签框1.添加项目("系统管理", "sys", [
    {文本: "用户管理", 标记: "user"},
    {文本: "角色管理", 标记: "role"},
    {文本: "权限设置", 标记: "permission"}
])
垂直标签框1.添加项目("退出", "logout")

' 默认选中第一项
垂直标签框1.置现行选中项(0)

' 主菜单点击回调
垂直标签框1.置项目被单击回调((源对象, 项目文本, 标记值) => {
    弹出提示("点击了主菜单：" + 项目文本)
})

' 子菜单点击回调
垂直标签框1.置项目子项被单击回调((源对象, 项目文本) => {
    弹出提示("点击了子菜单：" + 项目文本)
})

添加组件(垂直标签框1)

综合示例：后台管理侧边菜单

本示例模拟一个后台管理系统的侧边栏，包含图标化菜单项、多级子菜单，并展示如何根据选中项切换主内容区域。

' ========== 创建主容器（水平布局） ==========
变量 主容器 = 创建 弹性布局()
主容器.方向 = "row"
主容器.宽度 = 匹配父
主容器.高度 = 匹配父
添加组件(主容器)

' ========== 创建侧边菜单 ==========
变量 侧边菜单 = 创建 垂直标签框()
侧边菜单.宽度 = 220
侧边菜单.高度 = 匹配父
侧边菜单.背景颜色 = "#001529"
侧边菜单.文本颜色 = "#ffffff"
侧边菜单.点燃颜色 = "#ffffff"
侧边菜单.点燃背景色 = "rgba(255,255,255,0.1)"
侧边菜单.内边距 = "8px 0"
主容器.添加组件(侧边菜单)

' ========== 添加菜单项（带图标模拟） ==========
' 注意：图标使用文本模拟，实际可用图标组件
侧边菜单.添加项目("📊 控制台", "dashboard")
侧边菜单.添加项目("👥 用户管理", "users", [
    {文本: "用户列表", 标记: "userlist"},
    {文本: "添加用户", 标记: "useradd"},
    {文本: "权限管理", 标记: "permission"}
])
侧边菜单.添加项目("📦 商品管理", "products", [
    {文本: "商品列表", 标记: "productlist"},
    {文本: "添加商品", 标记: "productadd"},
    {文本: "分类管理", 标记: "category"}
])
侧边菜单.添加项目("📋 订单管理", "orders")
侧边菜单.添加项目("⚙️ 系统设置", "settings", [
    {文本: "基本设置", 标记: "basesettings"},
    {文本: "安全设置", 标记: "security"}
])
侧边菜单.添加项目("🚪 退出登录", "logout")

' 默认选中
侧边菜单.置现行选中项(0)

' ========== 创建内容区域 ==========
变量 内容区域 = 创建 绝对布局()
内容区域.宽度 = "flex-grow"
内容区域.高度 = 匹配父
内容区域.背景颜色 = "#f5f7fa"
内容区域.内边距 = "24px"
主容器.添加组件(内容区域)

' 内容标题标签
变量 标题标签 = 创建 标签()
标题标签.文本 = "欢迎使用管理系统"
标题标签.字体大小 = 24
标题标签.字体粗细 = "bold"
标题标签.文本颜色 = "#333"
内容区域.添加组件(标题标签)

' ========== 菜单点击回调 ==========
侧边菜单.置项目被单击回调((源对象, 项目文本, 标记值) => {
    ' 处理主菜单点击
    标题标签.文本 = "您选择了：" + 项目文本
    调试输出("主菜单点击：" + 标记值)
    
    ' 特殊处理退出
    如果(标记值 == "logout")
        确认框("确定要退出登录吗？")
        如果(结果)
            弹出提示("已退出")
        结束 如果
    结束 如果
})

侧边菜单.置项目子项被单击回调((源对象, 项目文本) => {
    ' 处理子菜单点击
    标题标签.文本 = "您选择了子菜单：" + 项目文本
    弹出提示("进入：" + 项目文本)
})

属性详解

点燃颜色

• 类型： 文本型
• 说明： 设置或获取当鼠标悬停在菜单项上时，文本显示的颜色。支持 CSS 颜色值，默认由主题决定。

点燃背景色

• 类型： 文本型
• 说明： 设置或获取当鼠标悬停在菜单项上时，菜单项的背景颜色。支持 CSS 颜色值，默认透明。

函数详解

添加项目(文本, 标记值, 子菜单项数组)

• 功能： 添加一个主菜单项，可选择是否附带子菜单。
• 参数：
  • 文本：文本型，必填，菜单项显示的文字。
  • 标记值：文本型，可选，用于标识该菜单项，可在回调中区分不同的菜单。
  • 子菜单项数组：数组型，可选，子菜单项列表，每个子项为 {文本: "xxx", 标记: "xxx"} 格式的对象。
• 返回值： 数值型，新添加的菜单项索引位置（从0开始）。
• 示例：

  ' 无子菜单
  变量 索引1 = 垂直标签框1.添加项目("控制台", "console")
  ' 带子菜单
  变量 索引2 = 垂直标签框1.添加项目("系统", "system", [
      {文本: "用户管理", 标记: "user"},
      {文本: "日志查看", 标记: "log"}
  ])
  

置现行选中项(索引)

• 功能： 设置当前选中的菜单项（高亮显示）。
• 参数： 索引（数值型），从0开始，对应 添加项目 返回的索引值。
• 返回值： 无。
• 示例： 垂直标签框1.置现行选中项(1)

取现行选中项()

• 功能： 获取当前选中的菜单项信息。
• 返回值： 对象，包含选中菜单项的数据（如 {文本: "控制台", 标记: "console"}），若无选中项则返回 空。
• 示例：

  变量 当前选中 = 垂直标签框1.取现行选中项()
  如果(当前选中 != 空)
      调试输出("当前选中：" + 当前选中.文本)
  结束 如果
  

清空()

• 功能： 清空所有菜单项，重置为空状态。
• 返回值： 无。

置项目被单击回调(回调函数)

• 功能： 设置主菜单项被单击时的回调函数。
• 参数： 回调函数，拉姆达表达式，格式为 (源对象, 项目文本, 标记值) => { ... }。
  • 源对象：触发事件的垂直标签框组件本身。
  • 项目文本：被单击主菜单项的文本。
  • 标记值：被单击主菜单项的标记值。
• 示例：

  垂直标签框1.置项目被单击回调((源对象, 文本, 标记) => {
      调试输出("点击了：" + 文本 + "，标记：" + 标记)
  })
  

置项目子项被单击回调(回调函数)

• 功能： 设置子菜单项被单击时的回调函数。
• 参数： 回调函数，拉姆达表达式，格式为 (源对象, 项目文本) => { ... }。
  • 源对象：触发事件的垂直标签框组件本身。
  • 项目文本：被单击子菜单项的文本。
• 示例：

  垂直标签框1.置项目子项被单击回调((源对象, 文本) => {
      弹出提示("子菜单：" + 文本)
  })
  

事件说明

项目被单击(源对象, 项目文本, 标记值)

• 功能： 与 置项目被单击回调 等效，适用于设计文件（.spldg）中定义的组件，采用 VB6 风格绑定。
• 示例：

  事件 垂直标签框1.项目被单击(源对象, 项目文本, 标记值)
      调试输出("主菜单：" + 项目文本)
  结束 事件
  

项目子项被单击(源对象, 项目文本)

• 功能： 与 置项目子项被单击回调 等效，适用于设计文件中的组件。
• 示例：

  事件 垂直标签框1.项目子项被单击(源对象, 项目文本)
      调试输出("子菜单：" + 项目文本)
  结束 事件
  

⚠️ 注意事项

1. 子菜单弹出方向：子菜单默认向右侧弹出，请确保组件右侧有足够的空间，否则可能被裁剪。
2. 标记值的使用：标记值 是区分不同菜单项的重要标识，建议使用唯一字符串（如 "dashboard"、"userlist"），而不是依赖索引或文本（文本可能重复或国际化变化）。
3. 选中项高亮：调用 置现行选中项 后，对应菜单项会高亮显示，同时取消之前的高亮。默认情况下，点击菜单项会自动更新高亮，但也可通过代码控制。
4. 主菜单和子菜单回调区分：点击主菜单触发 置项目被单击回调，点击子菜单触发 置项目子项被单击回调，两者互不干扰。
5. 清空后的状态：调用 清空() 后，所有菜单项被移除，取现行选中项() 返回 空。
6. 宽度自适应：组件宽度默认由 宽度 属性控制，子菜单弹出宽度由组件自动计算，无需额外设置。
7. 子菜单项数组格式：子菜单项数组中每个对象必须包含 文本 字段，标记 字段可选。若省略 标记，回调中无法区分具体子项。

相关文档

• 文档框架基础类_视图 —— 视图类提供的所有通用属性和方法
• 文档列表类组件_水平标签框 —— 水平导航菜单组件
• 文档列表类组件_列表框 —— 通用列表组件
• 文档轻语言网站：轻语言语法速查 —— 拉姆达表达式、对象字面量等
• 文档综合演示：后台管理侧边菜单 —— 实际应用示例