ThorUI文档

# 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示例小程序码

← tui-swipe-action 滑动菜单 →