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 属性控制抽屉显示隐藏。

注：maskClosable为true时，需绑定close事件，并在事件中将visible属性值设置为false以关闭抽屉

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

// data 数据 及 方法
export default {
  data() {
  	return {
  		visible:false
  	}
  },
  methods: {
  	closeDrawer(e) {
  		this.visible = false
  	},
  	//调用此方法显示抽屉
  	openDrawer() {
  		this.visible = true
  	}
  }
}

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

// data 数据 及 方法
Page({
  data: {
    visible:false
  },
  closeDrawer(e) {
  	this.setData({
  		visible:false
  	})
  },
  //调用此方法显示抽屉
  openDrawer() {
  	this.setData({
  		visible:true
  	})
  }
})

// Make sure to add code blocks to your code group

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

TIP

maskClosable 属性为 true 时，需绑定 close 事件，并在事件中将 visible 属性值设置为 false 以关闭抽屉

Events

注：uni-app端绑定事件使用@前缀，如@close；微信小程序原生使用bind前缀，如bindclose

事件名	说明	回调参数
close	遮罩点击事件，关闭抽屉，maskClosable为true时有效	{}

预览

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

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

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