组件：下拉菜单按钮

下拉菜单按钮组件用于组合主按钮和下拉菜单，支持设置主按钮文本、弹出位置、禁用状态、添加菜单项、插入分割线、置主按钮被单击回调、置菜单项被单击回调等特性，常用于操作按钮组、下拉操作菜单、功能集合等场景，支持四方向弹出。

典型使用场景：

• 操作按钮组（新建、打开、保存、删除等操作）
• 下拉操作菜单（更多操作、设置选项、工具选择）
• 功能集合（文件操作、编辑操作、视图操作）
• 用户菜单（个人中心、设置、退出登录）
• 批量操作（批量选择、批量删除、批量编辑）

📌 继承自视图的成员速查

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

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

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

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

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

常用操作速查

样式美化参考

按钮样式变体：

• 主要按钮：背景颜色 = "#1890ff"，文本颜色 = "#ffffff"，边框 = "none"
• 默认按钮：背景颜色 = "#ffffff"，文本颜色 = "#333333"，边框 = "1px solid #d9d9d9"
• 危险按钮：背景颜色 = "#ff4d4f"，文本颜色 = "#ffffff"，边框 = "none"
• 文本按钮：背景颜色 = "透明"，文本颜色 = "#1890ff"，边框 = "none"

菜单样式：

• 默认菜单：背景颜色 = "#ffffff"，边框 = "1px solid #d9d9d9"，边框圆角 = "4px"，阴影 = "0 2px 8px rgba(0,0,0,0.15)"
• 卡片菜单：背景颜色 = "#ffffff"，边框 = "none"，边框圆角 = "8px"，阴影 = "0 4px 12px rgba(0,0,0,0.15)"
• 暗色菜单：背景颜色 = "#1f1f1f"，边框 = "1px solid #434343"，边框圆角 = "4px"

菜单项样式：

• 普通项：文本颜色 = "#333333"，行高 = "32px"，内边距 = "0 16px"
• 悬停项：背景颜色 = "#f0f0f0"，文本颜色 = "#333333"
• 禁用项：文本颜色 = "#d9d9d9"，光标样式 = "not-allowed"
• 分割线：背景颜色 = "#f0f0f0"，高度 = "1px"，外边距 = "4px 0"

弹出方向样式：

• 向下弹出：弹出位置 = "bottomLeft"，`顶边 = 40
• 向上弹出：弹出位置 = "topLeft"，底边 = 40
• 向左弹出：弹出位置 = "leftTop"，右边 = 40
• 向右弹出：弹出位置 = "rightTop"，左边 = 40

状态样式：

• 正常状态：背景颜色 = "#ffffff"，边框 = "1px solid #d9d9d9"，光标样式 = "pointer"
• 悬停状态：背景颜色 = "#e6f7ff"，边框 = "1px solid #91d5ff"，光标样式 = "pointer"
• 禁用状态：背景颜色 = "#f5f5f5"，边框 = "1px solid #d9d9d9"，文本颜色 = "#d9d9d9"，光标样式 = "not-allowed"

示例代码

' 示例：完整的下拉菜单按钮使用演示
' 1. 创建下拉菜单按钮
变量 下拉菜单按钮1 = 创建 下拉菜单按钮()
' 2. 设置属性
下拉菜单按钮1.左边 = 100
下拉菜单按钮1.顶边 = 100
下拉菜单按钮1.标题 = "操作"
下拉菜单按钮1.弹出位置 = "bottomLeft"
' 3. 添加菜单项
下拉菜单按钮1.添加菜单项("新建", "new", 假)
下拉菜单按钮1.添加菜单项("打开", "open", 假)
下拉菜单按钮1.插入分割线()
下拉菜单按钮1.添加菜单项("删除", "del", 真)
' 4. 设置事件回调
下拉菜单按钮1.置主按钮被单击回调((源对象, 事件对象) => {
	调试输出("主按钮被点击")
})
下拉菜单按钮1.置菜单项被单击回调((源对象, 文本, 标记值) => {
	调试输出("选择了：" + 文本 + "，标记：" + 标记值)
})
' 5. 添加到父容器
添加组件(下拉菜单按钮1)

属性：标题

• 类型： 文本型
• 说明： 设置或获取主按钮显示的文本。

属性：禁用

• 类型： 逻辑型
• 说明： 设置或获取是否禁用整个按钮组件，禁用后主按钮与下拉触发区均不可触发。

属性：弹出位置

• 类型： 文本型
• 说明： 设置或获取下拉菜单的弹出位置，可选值：bottomLeft(默认)、bottomRight、topLeft、topRight。

函数：添加菜单项(文本, 标记值, 是否禁用)

添加一个菜单项，可指定文本、标记值、是否禁用，返回添加的索引位置，标记值、是否禁用可省略。

函数：插入分割线()

在下拉菜单中插入一条分割线，返回插入位置索引。

函数：清空菜单()

清空下拉菜单中的所有菜单项与分割线。

函数：显示菜单()

手动显示下拉菜单。

函数：隐藏菜单()

手动隐藏下拉菜单。

函数：置主按钮被单击回调(回调函数)

设置主按钮被单击时的回调函数，回调函数返回两个参数：(源对象,事件对象)。

函数：置菜单项被单击回调(回调函数)

设置菜单项被单击时的回调函数，回调函数返回三个参数：(源对象,菜单文本,标记值)。

函数：销毁()

销毁组件，移除下拉菜单 DOM 与文档事件监听，防止内存泄漏。

事件：主按钮被单击(源对象,事件对象)

当主按钮被单击时触发该事件。

事件：菜单项被单击(源对象,菜单文本,标记值)

当菜单项被单击时触发该事件。