底部对话框 xActionModal

---

在线预览

在线模拟尺寸:

介绍

样式与darawer不一样，风格更为圆润精致，适于提醒框，阅读对话框等场景。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-action-modal/x-action-modal.uvue

使用

<x-action-modal></x-action-modal>

Props 属性

名称	说明	类型	默认值
customStyle	自定义遮罩样式	string	""
title	标题	string	""
showTitle	是否显示底部关闭按钮	boolean	true
showClose	是否显示关闭	boolean	false
overlayClick	遮罩是否允许点击被关闭	boolean	true
show	显示可v-model:show双向绑定	boolean	false
showConfirm	显示取消按钮	boolean	true
duration	动画时间	number	350
round	打开方向为上和下时的圆角 空值时，取全局配置的圆角。注意是取drawer的圆角，统一弹层的圆角	string	""
maxHeight	弹层最大的高度值，默认为屏幕的可视高 提供值时不能为百分比，可以是px,rpx单位数字。如果你不带单位，默认转换为rpx单位。	string	""
bgColor	弹层的背景	string	"white"
darkBgColor	弹层的暗黑背景，如果为空取sheetDarkColor	string	""
btnColor	空值取全局主题值。	string	""
btnText	确认按钮的文本	string	""
btnFontColor	空值最自动计算文本色。	string	""
watiDuration	打开dom的延迟量，如果你打开 弹窗在ios正常。 请不要修改此值。如果遇到打不开，或者 打开 后没动画，关闭不了等可能是sdk bug导致 此时需要加大值来避免。具体加多少以你弹窗内的节点复杂度有关，需要你自行压力测试。 此值仅在ios下生效。	number	120

Events 事件

名称	参数	说明
confirm	-	底部按钮被点击时触发
click	-	点击遮罩事件
close	-	关闭是触发
open	-	打开时触发
beforeOpen	-	打开前执行
beforeClose	-	关闭前执行
update:show	-	等同v-model:show

Slots 插槽

名称	说明	数据
trigger	标签触发显示遮罩，免于使用变量控制	show: Boolean
title	标题插槽	show: Boolean
default	默认插槽	show: Boolean
footer	页脚按钮插槽	-

Ref 方法

名称	参数	返回值	说明
open	-	-	打开 *
close	-	-	关闭 *

示例文件路径

/pages/fankui/action-modal

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">底部对话框 ActionModal</x-text>
			<x-text color="#999999" >
				样式与darawer不一样，风格更为圆润精致，适于提醒框，阅读对话框等场景。
			</x-text>
		</x-sheet>
		<x-sheet>
			<x-action-modal :show="showModal" title="技巧提醒" btn-text="我知道了哇">
				<template v-slot:trigger="{show}">
					<x-button :block="true">显示技巧提醒</x-button>
				</template>
			
				<x-sheet class="flex flex-col flex-col-center-center">
					<x-icon font-size="96" color="primary" name="pantone-fill"></x-icon>
					<x-text font-size="18" class="text-weight-b">你学会了吗？</x-text>
					<x-text class="text-align-center text-grey">风格与drawer样式不同的是两边和底部有间隙？风格是否喜欢呢？</x-text>
				</x-sheet>
			</x-action-modal>
		</x-sheet>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const showModal = ref(false)
	
	onReady(() => {
		showModal.value = true
	})
</script>


<style lang="scss">

</style>