组件：抽屉

抽屉组件是一个从屏幕边缘滑出的浮层面板，用于承载临时内容，如侧边菜单、信息详情、表单编辑等。它支持从四个方向（左、右、上、下）滑出，并带有遮罩层，用户可通过点击遮罩或关闭按钮关闭抽屉。常用于需要在不离开当前页面的情况下展示额外内容的场景。

典型使用场景：

• 侧边菜单（移动端或后台管理系统的导航菜单）
• 详情信息展示（查看数据详情、用户资料）
• 表单编辑（在抽屉中编辑记录，不影响主页面）
• 通知中心或消息列表
• 设置面板或操作面板

📌 继承自视图的成员速查

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

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

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

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

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

常用操作速查

样式美化参考

抽屉的外观可通过以下属性进行精细控制：

• 整体容器：通过 背景颜色（建议 "#ffffff"）、边框圆角（仅在顶部/底部弹出时有效）等继承属性美化。
• 标题区域：标题 文本的样式可通过 字体大小、字体粗细、文本颜色 控制，关闭按钮默认显示在标题右侧。
• 内容区域：内容区域的背景色、内边距等可通过 置内容元素 传入的 DOM 元素样式控制，或通过 内容 属性设置 HTML 并配合 CSS 类。
• 遮罩层：遮罩层背景色默认为半透明黑色（rgba(0,0,0,0.45)），可通过 CSS 类自定义。
• 弹出方向：弹出位置 决定抽屉从哪个方向滑入，宽度或高度根据方向自动调整（左右弹出由 宽度 控制，上下弹出由 高度 控制）。

CSS 美化示例（在项目 CSS 文件中定义）：

.my-drawer .drawer-header {
    background-color: #f7f9fc;
    border-bottom: 1px solid #e8e8e8;
    padding: 16px 20px;
}
.my-drawer .drawer-body {
    padding: 20px;
}

在代码中应用样式类：抽屉1.添加样式类("my-drawer")

基础示例

创建一个从右侧滑出的抽屉，包含标题和简单内容，显示关闭按钮和遮罩，点击遮罩可关闭。

变量 抽屉1 = 创建 抽屉()
抽屉1.标题 = "设置"
抽屉1.宽度 = 400
抽屉1.弹出位置 = "right"
抽屉1.显示遮罩 = 真
抽屉1.点击遮罩关闭 = 真
抽屉1.显示关闭按钮 = 真

' 设置内容（HTML）
抽屉1.内容 = "<div style='padding:20px;'><p>这里是抽屉内容</p><button onclick='alert(\"操作\")'>操作</button></div>"

' 设置关闭回调
抽屉1.置抽屉被关闭回调((源对象) => {
    弹出提示("抽屉已关闭")
})

' 显示抽屉
抽屉1.显示()

综合示例：用户信息编辑抽屉

本示例模拟一个用户信息编辑功能，点击按钮打开右侧抽屉，在抽屉中展示用户详情并允许编辑，保存后关闭抽屉并刷新主页面数据。

' ========== 创建主页面按钮 ==========
变量 打开按钮 = 创建 按钮()
打开按钮.左边 = 50
打开按钮.顶边 = 50
打开按钮.文本 = "编辑用户信息"
打开按钮.背景颜色 = "#1890ff"
打开按钮.文本颜色 = "#ffffff"
打开按钮.边框圆角 = "6px"
打开按钮.宽度 = 160
打开按钮.高度 = 40
添加组件(打开按钮)

' ========== 创建抽屉 ==========
变量 编辑抽屉 = 创建 抽屉()
编辑抽屉.标题 = "编辑用户"
编辑抽屉.宽度 = 480
编辑抽屉.弹出位置 = "right"
编辑抽屉.显示遮罩 = 真
编辑抽屉.点击遮罩关闭 = 假  ' 禁止点击遮罩关闭，强制用户点击取消/保存
编辑抽屉.显示关闭按钮 = 真
' 抽屉背景色
编辑抽屉.背景颜色 = "#ffffff"

' ========== 创建抽屉内容（DOM元素） ==========
变量 内容容器 = 创建元素("div")
内容容器.style.padding = "24px"

' 姓名输入
变量 姓名标签 = 创建元素("label")
姓名标签.textContent = "姓名"
姓名标签.style.display = "block"
姓名标签.style.marginBottom = "4px"
姓名标签.style.fontWeight = "bold"
内容容器.appendChild(姓名标签)

变量 姓名输入 = 创建元素("input")
姓名输入.type = "text"
姓名输入.value = "张三"
姓名输入.style.width = "100%"
姓名输入.style.padding = "8px 12px"
姓名输入.style.border = "1px solid #d9d9d9"
姓名输入.style.borderRadius = "4px"
姓名输入.style.marginBottom = "16px"
内容容器.appendChild(姓名输入)

' 邮箱输入
变量 邮箱标签 = 创建元素("label")
邮箱标签.textContent = "邮箱"
邮箱标签.style.display = "block"
邮箱标签.style.marginBottom = "4px"
邮箱标签.style.fontWeight = "bold"
内容容器.appendChild(邮箱标签)

变量 邮箱输入 = 创建元素("input")
邮箱输入.type = "email"
邮箱输入.value = "zhangsan@example.com"
邮箱输入.style.width = "100%"
邮箱输入.style.padding = "8px 12px"
邮箱输入.style.border = "1px solid #d9d9d9"
邮箱输入.style.borderRadius = "4px"
邮箱输入.style.marginBottom = "16px"
内容容器.appendChild(邮箱输入)

' 按钮组
变量 按钮组 = 创建元素("div")
按钮组.style.display = "flex"
按钮组.style.justifyContent = "flex-end"
按钮组.style.gap = "12px"

变量 取消按钮 = 创建元素("button")
取消按钮.textContent = "取消"
取消按钮.style.padding = "8px 16px"
取消按钮.style.border = "1px solid #d9d9d9"
取消按钮.style.borderRadius = "4px"
取消按钮.style.backgroundColor = "#ffffff"
取消按钮.style.cursor = "pointer"
按钮组.appendChild(取消按钮)

变量 保存按钮 = 创建元素("button")
保存按钮.textContent = "保存"
保存按钮.style.padding = "8px 16px"
保存按钮.style.border = "none"
保存按钮.style.borderRadius = "4px"
保存按钮.style.backgroundColor = "#1890ff"
保存按钮.style.color = "#ffffff"
保存按钮.style.cursor = "pointer"
按钮组.appendChild(保存按钮)

内容容器.appendChild(按钮组)

' 设置抽屉内容
编辑抽屉.置内容元素(内容容器)

' ========== 打开抽屉 ==========
打开按钮.置被单击回调((源对象) => {
    编辑抽屉.显示()
})

' ========== 取消按钮事件 ==========
取消按钮.onclick = () => {
    编辑抽屉.关闭()
}

' ========== 保存按钮事件 ==========
保存按钮.onclick = () => {
    变量 姓名 = 姓名输入.value
    变量 邮箱 = 邮箱输入.value
    如果(删首尾空(姓名) == "" 或 删首尾空(邮箱) == "")
        弹出提示("请完整填写信息")
        返回
    结束 如果
    ' 模拟保存
    弹出提示("保存成功！姓名：" + 姓名 + "，邮箱：" + 邮箱)
    编辑抽屉.关闭()
    ' 更新主页面显示（例如更新按钮文本）
    打开按钮.文本 = "已更新：" + 姓名
}

' ========== 抽屉关闭回调（可在此刷新数据） ==========
编辑抽屉.置抽屉被关闭回调((源对象) => {
    调试输出("抽屉已关闭")
})

属性详解

标题

• 类型： 文本型
• 说明： 设置或获取抽屉标题栏显示的文本。标题会显示在抽屉顶部左侧，右侧为关闭按钮（如果 显示关闭按钮 为 真）。

宽度

• 类型： 数值型
• 说明： 设置或获取抽屉的宽度（像素），仅在左右弹出（弹出位置 为 "left" 或 "right"）时生效。默认 378。注意：该值为抽屉面板的宽度，而非内容区宽度。

高度

• 类型： 数值型
• 说明： 设置或获取抽屉的高度（像素），仅在上/下弹出（弹出位置 为 "top" 或 "bottom"）时生效。默认 378。

弹出位置

• 类型： 文本型
• 说明： 设置或获取抽屉从哪个方向滑出。可选值：
  • "left"：从左侧滑出
  • "right"（默认）：从右侧滑出
  • "top"：从顶部滑出
  • "bottom"：从底部滑出

显示关闭按钮

• 类型： 逻辑型
• 说明： 设置或获取是否在标题栏右侧显示关闭按钮（×）。默认为 真。点击关闭按钮会触发抽屉关闭，并执行关闭回调。

显示遮罩

• 类型： 逻辑型
• 说明： 设置或获取是否显示遮罩层（背景半透明层）。默认为 真。遮罩层用于突出抽屉内容，并阻止用户与背景交互。

点击遮罩关闭

• 类型： 逻辑型
• 说明： 设置或获取是否允许用户点击遮罩层来关闭抽屉。默认为 真。设为 假 时，用户必须通过关闭按钮或调用 关闭() 方法关闭。

内容

• 类型： 文本型
• 说明： 设置抽屉主体内容，支持 HTML 字符串。设置后，抽屉内容区会渲染该 HTML。如果同时使用了 置内容元素，则 内容 属性会被覆盖。

函数详解

置内容元素(元素)

• 功能： 将抽屉的内容区设置为指定的 DOM 元素或视图组件。此方法会覆盖 内容 属性设置的 HTML 字符串，提供更灵活的组件化内容。
• 参数： 元素，可以是原生 DOM 节点或视图组件实例（会自动取其原生对象）。
• 返回值： 无。
• 示例：

  变量 容器 = 创建元素("div")
  容器.innerHTML = "<p>自定义内容</p>"
  抽屉1.置内容元素(容器)
  

显示(父容器)

• 功能： 显示抽屉，将其添加到页面指定父容器中并触发滑入动画。
• 参数： 父容器（可选），可以是视图组件或原生 DOM 元素。若省略，默认添加到 body。
• 返回值： 无。
• 示例： 抽屉1.显示() 或 抽屉1.显示(面板1)

关闭()

• 功能： 关闭抽屉，触发滑出动画，并从 DOM 中移除。会触发 置抽屉被关闭回调。
• 返回值： 无。
• 示例： 抽屉1.关闭()

置抽屉被关闭回调(回调函数)

• 功能： 设置抽屉关闭时的回调函数，无论通过点击关闭按钮、点击遮罩（若允许）还是调用 关闭() 方法，都会触发。
• 参数： 回调函数，格式为 (源对象) => { ... }。
  • 源对象：抽屉组件本身。
• 返回值： 无。
• 示例：

  抽屉1.置抽屉被关闭回调((源对象) => {
      调试输出("抽屉已关闭")
  })
  

事件说明

抽屉被关闭(源对象)

• 功能： 与 置抽屉被关闭回调 等效，适用于设计文件（.spldg）中定义的组件。
• 示例：

  事件 抽屉1.抽屉被关闭(源对象)
      调试输出("抽屉已关闭")
  结束 事件
  

⚠️ 注意事项

1. 父容器要求：默认添加到 body，可确保抽屉覆盖全屏。若指定了其他父容器，该父容器需具有相对定位或固定定位，且宽高足够覆盖视图区域，否则抽屉可能无法正确覆盖。
2. 内容更新：内容 和 置内容元素 均可设置内容，但 置内容元素 优先级更高。调用 置内容元素 后，内容 属性将失效。
3. 事件绑定：通过 置内容元素 或 内容 属性添加的 HTML 内容中的事件（如 onclick）需使用原生 JavaScript 绑定，不能直接使用轻语言的 置被单击回调。若需要轻语言风格的事件，建议在 DOM 元素创建后通过轻语言方法绑定（如 按钮.置被单击回调）。
4. 关闭回调：置抽屉被关闭回调 在抽屉完全关闭后触发，可用于刷新主页面数据或执行后续逻辑。
5. 遮罩点击关闭：点击遮罩关闭 默认为 真，若希望用户必须通过按钮关闭，请设为 假。
6. 禁用状态：抽屉本身没有 禁用 属性，但其中的内容可独立控制。
7. 多次显示：抽屉可以多次显示和关闭，状态会自动重置。但注意在关闭后，内容元素仍保留，不会自动清空。
8. 定位方式：抽屉使用固定定位（position: fixed），因此即使页面滚动，抽屉也会固定在视口边缘。

相关文档

• 文档框架基础类_视图 —— 视图类提供的所有通用属性和方法
• 文档其它通用类组件_对话框 —— 类似弹窗组件
• 文档轻语言网站：轻语言语法速查 —— 拉姆达表达式、事件处理等
• 文档综合演示：用户信息编辑抽屉 —— 实际应用示例