spz-sidebar 抽屉#

#何时使用

当需要一个附加的面板来做更进一步的操作，不离开当前页面，这个面板在需要的时候才会打开。例如：快速加购弹窗。

#代码演示

#基本用法

基础抽屉，点击触发按钮抽屉从左滑出，点击遮罩区关闭。

<button @tap="sidebar.open">Open</button>

<spz-sidebar layout="nodisplay" side="left" id="sidebar">
  <div class="sidebar-wrapper">
    <div class="sidebar-header">
      <h3>Basic Drawer</h3>
      <button @tap="sidebar.close">Close</button>
    </div>
    <div>Some contents...</div>
    <div>Some contents...</div>
    <div>Some contents...</div>
  </div>
</spz-sidebar>

#属性

#方法

#open

打开抽屉，不需要参数。

#close

关闭抽屉。

#toggle

切换抽屉开关状态，不需要参数。

#事件

#open

抽屉完全打开时自动触发。

#beforeClose

抽屉开始关闭的那一刻自动触发。

#close

当抽屉完全关闭时自动触发，仅在immediate=false时有效。

#sidebarClose

当抽屉完全关闭时自动触发，仅在immediate=false时有效，同close事件。

#AI 摘要（LLM Ready）

• 组件标识：spz-sidebar
• 用途一句话：屏幕边缘滑出的浮层面板。
• 可识别属性条目：4
• 可识别方法小节：3
• 可识别事件小节：4
• 关键属性名（Top）：side、disable-unmount、open、i-spzhtml-sidebar-opened
• 关键方法名（Top）：open、close、toggle
• 关键事件名（Top）：open、beforeClose、close、sidebarClose
• 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
• 关联文档：/guide/actions-and-events/ 、/guide/layouts/