Drawer 侧边弹出框

Drawer 概述

侧边弹出框从父窗体边缘滑入，覆盖住部分父窗体内容。用户在弹框内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务

Drawer 代码示例

基础示例

示例有 width，title，style，### n-change 的使用方式
v-model 绑定的 value 值随弹框的变化而变化

左侧弹出框

左侧弹出框
不设置遮罩
自定义表头和删除按钮
页面可滚动

多个侧边弹框嵌套使用

嵌套使用

某个元素内部使用

transfer 为 false inner 为 true 时使用
同时设置 style 和 mask-style

Drawer API

Drawer props

属性	说明	类型	默认值
value	弹框是否显示，可使用 v-model 双向绑定数据	Boolean	false
title	标题，如果使用 slot 自定义了页头，则 title 无效	String	-
width	宽度。当其值不大于 100 时以百分比显示，大于 100 时为像素	Number | String	256
height	高度。当其值不大于 100 时以百分比显示，大于 100 时为像素(用户 placement 为 top 或者 down)(v1.0.24)	Number | String	256
closable	是否显示右上角的关闭按钮	Boolean	true
mask-closable	是否允许点击遮罩层关闭	Boolean	true
mask	是否显示遮罩层	Boolean	true
mask-style	遮罩层样式	Object	-
styles	弹框中间层的样式	Object	-
scrollable	页面是否可以滚动	Boolean	false
placement	弹框的方向，可选值为 left 或 right up down(v.0.24)	String	right
transfer	是否将弹框放置于 body 内	Boolean	true
class-name	设置弹框容器 .h-ui-drawer-wrap 的类名	String	-
inner	是否设置弹框在某个元素内打开，开启此属性时，应当关闭 transfer 属性	Boolean	false

Drawer event

事件名	说明	返回值
on-close	关闭弹框时触发	无
on-visible-change	显示状态发生变化时触发	true / false

Drawer slot

名称	说明
header	自定义标题栏
close	自定义右上角关闭内容
默认	弹框主体内容