KeCheng

2.8 KiB

Raw Permalink Blame History Unescape Escape

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

title	description	spline	isComponent
Drawer 抽屉	用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。。	message	true

该组件于 0.7.2 版本上线，请留意版本。

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-drawer": "tdesign-miniprogram/drawer/drawer"
}

代码演示

基础抽屉

带图标的抽屉

Drawer的 visible 是受控的，需要手动设置 visible 为 true 才会开启抽屉

API

Drawer Props

名称	类型	默认值	说明	必传
close-on-overlay-click	Boolean	true	点击蒙层时是否触发抽屉关闭事件	N
destroy-on-close	Boolean	false	抽屉关闭时是否销毁节点	N
footer	Slot	-	`0.29.0`。抽屉的底部	N
items	Array	-	抽屉里的列表项。TS 类型：`DrawerItem[]` `interface DrawerItem { title: string; icon: string; }`。详细类型定义	N
placement	String	right	抽屉方向。可选项：left/right	N
show-overlay	Boolean	true	是否显示遮罩层	N
title	String / Slot	-	`0.29.0`。抽屉的标题	N
visible	Boolean	false	组件是否可见	N
z-index	Number	11500	抽屉层级，样式默认为 11500	N

Drawer Events

名称	参数	描述
close	`(trigger: TriggerSource)`	关闭时触发。详细类型定义。 `type TriggerSource = 'overlay'`
item-click	`(index: number; item: DrawerItem)`	点击抽屉里的列表项
overlay-click	-	如果蒙层存在，点击蒙层时触发

2.8 KiB Raw Permalink Blame History Unescape Escape

引入