# t-avoid-menu

AvoidMenu 避让菜单

t-avoid-menu 组件介绍

t-avoid-menu 用于在小程序环境中避开顶部胶囊按钮区域，自动计算胶囊按钮的位置和尺寸，确保内容不会被胶囊按钮遮挡。适用于自定义导航栏场景。

t-avoid-menu 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-avoid-menu 基础用法

基础用法参考 demo/avoid-menu/avoid-menu.uvue，将需要避开胶囊区域的内容包裹在组件内。

<template>
	<view :class="[`h-100% tpg`]">
		<tui-theme-switch></tui-theme-switch>
		<t-avoid-menu>
			<t-navbar title="胶囊安全区"
					  type="primary"
					  right-icon="setting">
			</t-navbar>
		</t-avoid-menu>
		<t-card class="r-10 m-15"
				title='AvoidMenu 胶囊安全区'
				subTitle="自动避开小程序的胶囊按钮"></t-card>
	</view>
</template>

t-avoid-menu Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	true
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'mini'

t-avoid-menu Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	NodeInfo
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-

t-avoid-menu Slots

插槽名	说明
default	需要避开胶囊区域的内容