Action-Menu 选项菜单

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

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="底部操作菜单" class="p.30">
		<t-card class="mb.30" title="ActionMenu" subTitle="从底部操作菜单(分享等菜单)-插槽用法灵活布局"></t-card>
		<t-action-menu title="请选择" class="tdr...ur" button-text="取消">
			<template v-slot:button>
				<t-button class="mb.30">菜单</t-button>
			</template>
			<t-col class="mtb.20">
				<t-row 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="分享到" class="tdr...ur" button-text="取消">
			<template v-slot:button>
				<t-button class="mb.30">分享</t-button>
			</template>
			<t-row class="mtb.10-tvg">
				<t-swiper :indicatorDots='true' :circular="true" class='h.200'>
					<t-swiper-item class="fl-fc">
						<t-col class="faic-mlbr.40">
							<t-image class="twh.60 mb.10" src="/static/image/wx.png"></t-image>
							<t-text>微信</t-text>
						</t-col>
						<t-col class="faic-mlbr.40">
							<t-image class="twh.60 mb.10" src="/static/image/qq.png"></t-image>
							<t-text>QQ</t-text>
						</t-col>
						<t-col class="faic-mlbr.40">
							<t-image class="twh.60 mb.10" src="/static/image/zfb.png"></t-image>
							<t-text>支付宝</t-text>
						</t-col>
						<t-col class="faic-mlbr.40">
							<t-image class="twh.60 mb.10" src="/static/image/dy.png"></t-image>
							<t-text>抖音</t-text>
						</t-col>
					</t-swiper-item>
					<t-swiper-item class="fl-fc">
						<t-col class="faic-mlbr.40">
							<t-image class="twh.60 mb.10" src="/static/image/tb.png"></t-image>
							<t-text>淘宝</t-text>
						</t-col>
						<t-col class="faic-mlbr.40">
							<t-image class="twh.60 mb.10" src="/static/image/tm.png"></t-image>
							<t-text>天猫</t-text>
						</t-col>
						<t-col class="faic-mlbr.40">
							<t-image class="twh.60 mb.10" src="/static/image/jd.png"></t-image>
							<t-text>京东</t-text>
						</t-col>
						<t-col class="faic-mlbr.40">
							<t-image class="twh.60 mb.10" src="/static/image/pdds.png"></t-image>
							<t-text>拼多多</t-text>
						</t-col>
					</t-swiper-item>
				</t-swiper>
			</t-row>
		</t-action-menu>
		<t-action-menu title="请选择" class="tdr-m.30" button-text="取消">
			<template v-slot:button>
				<t-button class="mb.30">设置样式</t-button>
			</template>
			<t-col class="mtb.10">
				<t-row 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>

Props

名称	描述	类型	默认值	可选值
title	菜单标题	String	'标题'	-
buttonText	按钮文本	String	'取消'	-

Events

事件名	描述	回调参数	版本
show	显示菜单	-	-

Slots

名称	描述
default	菜单内容区域
button	按钮区域，用于自定义按钮