# drawer 抽屉

Drawer 左右抽屉,内容超过一屏时建议插槽使用scroll-view。

# 组件结构

<template>
	<view  @touchmove.stop.prevent>
		<view v-if="mask" class="tui-drawer-mask" :class="{'tui-drawer-mask_show':visible}" @tap="handleMaskClick"></view>
		<view class="tui-drawer-container" :class="[mode=='left'?'tui-drawer-container_left':'tui-drawer-container_right',visible?'tui-drawer-container_show':'']">
			<slot></slot>
		</view>
	</view>
</template>

# 组件脚本

<script>
	export default {
		name:"tuiDrawer",
		
		...省略n行
		
	}
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
visible Boolean 是否显示抽屉 false
mask Boolean 是否需要mask true
maskClosable Boolean 遮罩是否可点击 true
mode String 左抽屉还是右抽屉,可传入left right true

# methods

名称 描述
@close 遮罩点击事件,关闭抽屉

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/drawer/drawer

# H5二维码

# 小程序二维码