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二维码

小程序二维码