Tui-Plus4.0.0

Appearance

ActionMenu (选项菜单) ​

从底部操作菜单(分享等菜单)-插槽用法灵活布局

支持平台 ​

安卓ios鸿蒙web微信小程序
√√√√√

示例代码 ​

html
<template>
	<t-page main-class="p-30">
		<t-card main-class="mb-30" title="ActionMenu" subTitle="从底部操作菜单(分享等菜单)-插槽用法灵活布局"></t-card>
		<t-action-menu title="请选择" main-class="" button-text="取消">
			<template v-slot:button>
				<t-button type="p" main-class="mb-30">菜单</t-button>
			</template>
			<t-col main-class="mtb-20">
				<t-row main-class="tdp-l fc tvg mb-2px" :hover="true" v-for="i in 3">
					<t-text>选项{{i}}</t-text>
				</t-row>
			</t-col>
		</t-action-menu>
		<t-action-menu title="分享到" main-class="tdr-,,12" button-text="取消">
			<template v-slot:button>
				<t-button type="e" main-class="mb-30">分享</t-button>
			</template>
			<t-row main-class="mtb-10 tvg">
				<swiper style="height: 200rpx;width:100%;">
					<swiper-item style="display: flex;flex-direction: row;align-items: center;justify-content: center;">
						<t-col main-class="faic mlbr-40">
							<t-image main-class="twh-60 mb-10" src="/pagesA/static/image/qq.png"></t-image>
							<t-text>QQ</t-text>
						</t-col>
						<t-col main-class="faic mlbr-40">
							<t-image main-class="twh-60 mb-10" src="/pagesA/static/image/zfb.png"></t-image>
							<t-text>支付宝</t-text>
						</t-col>
						<t-col main-class="faic mlbr-40">
							<t-image main-class="twh-60 mb-10" src="/pagesA/static/image/dy.png"></t-image>
							<t-text>抖音</t-text>
						</t-col>
					</swiper-item>
					<swiper-item style="display: flex;flex-direction: row;align-items: center;justify-content: center;">
						<t-col main-class="faic mlbr-40">
							<t-image main-class="twh-60 mb-10" src="/pagesA/static/image/tb.png"></t-image>
							<t-text>淘宝</t-text>
						</t-col>
						<t-col main-class="faic mlbr-40">
							<t-image main-class="twh-60 mb-10" src="/pagesA/static/image/tm.png"></t-image>
							<t-text>天猫</t-text>
						</t-col>
						<t-col main-class="faic mlbr-40">
							<t-image main-class="twh-60 mb-10" src="/pagesA/static/image/jd.png"></t-image>
							<t-text>京东</t-text>
						</t-col>
						<t-col main-class="faic mlbr-40">
							<t-image main-class="twh-60 mb-10" src="/pagesA/static/image/pdd.png"></t-image>
							<t-text>拼多多</t-text>
						</t-col>
					</swiper-item>
				</swiper>
			</t-row>
		</t-action-menu>
		<t-action-menu title="请选择" main-class="tdr m-30" button-text="取消">
			<template v-slot:button>
				<t-button type="s" main-class="mb-30">设置样式</t-button>
			</template>
			<t-col main-class="mtb-10">
				<t-row main-class="tdp-l fc tvg mb-2px" :hover="true" v-for="i in 3">
					<t-text>选项{{i}}</t-text>
				</t-row>
			</t-col>
		</t-action-menu>
	</t-page>
</template>
<script setup>

</script>

属性 ​

名称类型默认值说明可选值
sizeStringmini组件尺寸large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
typeString""组件类型info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabledBooleanfalse组件是否禁用false, true
stopBooleanfalse是否阻止事件冒泡（Tui统一写法处理事件冒泡）false, true
hoverBooleantrue是否有点击效果false, true
pathString""点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。-
mainClassString""组件根节点的样式-
nativeClassString""组件根节点原生样式-
effectString"normal"组件显示主题normal(正常), dark(深色), light(浅色), plain(镂空)
titleString标题菜单标题
buttonTextString取消按钮文本

方法 ​

名称参数返回值说明
show--打开、关闭菜单

插槽 ​

名称返回值说明
default-
name-