Drawer 抽屉，抽屉式导航，用于展示侧滑菜单，侧滑导航。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

基础使用

通过 show 属性控制是否显示抽屉，@close 事件为当 maskClosable 属性值为true时点击遮罩回调事件，通过设置 show 属性为false来关闭抽屉。

当内容较多需要滚动时，可在组件内部使用 scroll-view 来达到内容滚动效果。

<wui-drawer :show="show" @close="closeDrawer">
<scroll-view scroll-y class="wui-scroll__view">
  <view>
    <wui-list-cell arrow v-for="(item,index) in itemList" :key="index">
      item{{index+1}}
    </wui-list-cell>
  </view>
</scroll-view>
</wui-drawer>

/* 自定义内容区样式需自行控制 */
.wui-scroll__view {
	width: 520rpx;
	flex: 1;
	overflow: hidden;
}

const show = ref(false)
const itemList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20])
//调用此方法显示抽屉
const showDrawer = (type)=> {
    show.value = true
}
const closeDrawer = (type)=> {
    show.value = false
}

从左往右开

通过 show 属性控制是否显示抽屉，direction 属性控制抽屉打开方向，maskClosable 属性设置是否可点击遮罩关闭抽屉（值为true时点击后回调事件为@close）。 当内容较多需要滚动时，可在组件内部使用 scroll-view 来达到内容滚动效果。

<wui-drawer :show="show" direction="left" :maskClosable="false">
<view class="wui-scroll__view">
  <view class="wui-title">左侧菜单栏</view>
  <scroll-view scroll-y style="height: 720rpx;">
    <view>
      <wui-list-cell v-for="(item,index) in itemList" :key="index">
        item{{index+1}}
      </wui-list-cell>
    </view>
  </scroll-view>
  <view class="wui-btn__box">
    <wui-button type="warning" width="400rpx" height="84rpx" text="关闭菜单栏" bold @click="closeDrawer">
    </wui-button>
  </view>
</view>
</wui-drawer>

.wui-scroll__view {
	width: 520rpx;
	flex: 1;
	overflow: hidden;
}

.wui-title {
	padding: 64rpx 32rpx 32rpx;
	box-sizing: border-box;
	font-weight: bold;
}

.wui-btn__box {
	padding: 40rpx 0;
	display: flex;
	justify-content: center;
}

const show = ref(false)
const itemList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20])
//调用此方法显示抽屉
const showDrawer = (type)=> {
    show.value = true
}
const closeDrawer = (type)=> {
    show.value = false
}

Slots

插槽名称	说明
default	自定义显示内容

Props

属性名	类型	说明	默认值	平台差异说明
show	Boolean	是否显示抽屉	false	-
direction	String	抽屉打开方向，可选值：left，right	right	-
background	String	抽屉背景颜色	#fff	-
zIndex	Number, String	抽屉z-index值	996	Nvue端无效，默认越靠后的元素层级越高
maskClosable	Boolean	点击遮罩 是否可关闭	true	-
maskBackground	String	遮罩背景色	rgba(0,0,0,.6)	-
radius	Number, String	外层容器圆角值，左侧打开时为右侧圆角，右侧打开时为左侧圆角	0	-

Events

事件名	说明	回调参数
@close	点击遮罩层（maskClosable=true）时触发	-