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>属性
跳转到“属性”| 属性名 | 说明 | 类型 | 默认值 | 是否必需 |
|---|---|---|---|---|
| side | 打开的方向：left, right, bottom, top |
string | - | 是 |
| disable-unmount | 如果该属性存在，关闭抽屉后不卸载里面的内容 | - | - | 否 |
| open | 当抽屉打开时自动加上, 关闭时移除 | - | - | 否 |
| i-spzhtml-sidebar-opened | 当抽屉打开动画结束时自动加上, 关闭时移除 | - | - | 否 |
方法
跳转到“方法”open
跳转到“open”打开抽屉，不需要参数。
close
跳转到“close”关闭抽屉。
| 参数名 | 说明 | 类型 | 默认值 | 是否必需 |
|---|---|---|---|---|
| immediate | 传递这个参数用来判断关闭抽屉时是否需要过渡动画，当值为true时无动画 |
boolean | true |
否 |
toggle
跳转到“toggle”切换抽屉开关状态，不需要参数。
事件
跳转到“事件”open
跳转到“open”抽屉完全打开时自动触发。
beforeClose
跳转到“beforeClose”抽屉开始关闭的那一刻自动触发。
close
跳转到“close”当抽屉完全关闭时自动触发，仅在immediate=false时有效。
sidebarClose
跳转到“sidebarClose”当抽屉完全关闭时自动触发，仅在immediate=false时有效，同close事件。