# tui-drawer 抽屉

介绍

抽屉,支持上、下、左、右四个方向弹出,内容超过一屏时建议插槽内使用scroll-view。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiDrawer from "@/components/thorui/tui-drawer/tui-drawer.vue"
export default {
	components:{
		tuiDrawer
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-drawer": "/components/thorui/tui-drawer/tui-drawer"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

抽屉弹出方向

通过 mode 属性设置抽屉的弹出方向。 支持 left 左侧、right 右侧、bottom 底部、top 顶部。默认为 right 右侧。

通过 visible 属性控制抽屉显示隐藏。

<!--uni-app-->
<tui-drawer :mode="mode" :visible="visible" @close="closeDrawer">
  <view class="d-container">
	<tui-button height="80rpx" type="warning" shape="circle" @click="closeDrawer">关闭抽屉</tui-button>
  </view>
</tui-drawer>

<!--微信小程序-->
<tui-drawer mode="{{mode}}" visible="{{visible}}" bindclose="closeDrawer">
  <view class="d-container">
	<tui-button height="80rpx" type="warning" shape="circle" bindclick="closeDrawer">关闭抽屉</tui-button>
  </view>
</tui-drawer>

# Slots

名称 说明
default 抽屉显示内容,自定义展示

# Props

参数 类型 说明 默认值
visible Boolean 是否显示抽屉 false
mask Boolean 是否需要mask true
maskClosable Boolean 遮罩是否可点击 true
mode String 抽屉弹出方向,可传入left,right,bottom,top right
zIndex [Number, String] 抽屉 z-index值 990
maskZIndex [Number, String] 遮罩 z-index值 980
backgroundColor String 抽屉的背景色 #fff

# Events

事件名 说明 回调参数
close 遮罩点击事件,关闭抽屉 {}

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码