TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
790
3.2m

对话框 xModal ​

在线预览
在线模拟尺寸:

介绍 ​

可全局统一更改风格。

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

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

使用 ​

ts

<x-modal></x-modal>

Props 属性 ​

名称说明类型默认值
customStyle自定义遮罩样式
string""
title标题
string""
showFooter显示底部操作栏
booleantrue
showTitle是否显示底部关闭按钮
booleantrue
showClose是否显示底部关闭按钮
booleanfalse
showCancel显示取消按钮
booleantrue
overlayClick遮罩是否允许点击被关闭
booleantrue
show显示可v-model:show双向绑定
booleanfalse
duration动画时间
number300
watiDuration打开dom的延迟量，如果你打开 弹窗在ios正常。
请不要修改此值。如果遇到打不开，或者 打开 后没动画，关闭不了等可能是sdk bug导致
此时需要加大值来避免。具体加多少以你弹窗内的节点复杂度有关，需要你自行压力测试。
此值仅在ios下生效。
number120
cancelText取消按钮的文本
string""
confirmText确认按钮的文本
string""
round打开方向为上和下时的圆角
空值时，取全局配置的圆角。
string""
width宽，百分比，Px,rpx，auto都支持
string"84%"
height宽，百分比，Px,rpx，auto都支持
string"240px"
maxHeight可以是百分比,px,rpx单位数字。如果你不带单位，默认转换为rpx单位。
string"80%"
disabledScroll是否禁用内部的scroll标签
禁用后内容不会滚动，如果设定了指定高，内容超出指定高，会被裁切
但如果没有指定高，内容自动的话，高是自动的。
有这个属性是因为截止4.03scroll-view里面放input不会上推键盘，及内部的view touchMove会失效。
booleanfalse
bgColor容器背景色
string"white"
darkBgColor暗黑时的容器背景色，不填写的话取sheetDarkColor
string""
zIndex层级
string"1105"
contentPadding内容区域的间隙
string"16"
btnColor底部按钮操作的主题色，空取全局
string""
beforeClose关闭前异步执行的函数，如果返回false阻止关闭，返回true允许关闭
必须返回的是Promise异步函数，且类型返回值必须是Promise<boolean>，不然会报错。
callbackType() : Promise<boolean> => {return Promise.resolve(true)}
closeColor关闭图标的颜色
string"#e6e6e6"
closeDarkColor关闭图标的暗黑颜色
string"#545454"

Events 事件 ​

名称参数说明
click-点击遮罩事件
close-关闭是触发
open-打开时触发
beforeOpen-打开前执行
beforeClose-关闭前执行
update:show-等同v-model:show
cancel-取消时触发
confirm-确认时触发

Slots 插槽 ​

名称说明数据
trigger标签触发显示遮罩，免于使用变量控制-
title标题插槽-
default默认插槽-
footer底部操作栏-

Ref 方法 ​

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

示例文件路径 ​

json

/pages/fankui/modal

示例源码 ​

uvue
vue
<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">对话框 Modal</x-text>
			<x-text color="#999999" >
				精致美观的对话框，可全局配置风格
			</x-text>
		</x-sheet>
		<x-sheet class="flex flex-row flex-row-center-center">
			<x-modal content-padding="24px 24px" @confirm="onconfirm" style="width:48%;margin-right:2%"  height="auto">
				<template #trigger><x-button :block="true">自动内容高</x-button></template>
				<x-input dark-bg-color="" placeholder="请输入密码"></x-input>
				<x-input dark-bg-color="" class="my-12" placeholder="请输入密码"></x-input>
				<view class="flex flex-row flex-row-center-between">
					<x-text class="text-size-m text-grey">同意协议</x-text>
					<x-switch ></x-switch>
				</view>
			</x-modal>

			<x-modal style="width:48%"  position="right" :show-close="true" :show-footer="false">
				<template #trigger><x-button  :block="true" color="warn">显示关闭</x-button></template>
				<x-text color="#999999" >
					精致美观的对话框，可全局配置风格
				</x-text>
			</x-modal>

		</x-sheet>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">默认高度，禁用遮罩关闭</x-text>
			<x-text color="#999999" class="mb-32">
				点击遮罩禁用关闭弹跳提示
			</x-text>
			
			<x-modal :overlayClick="false" confirmText="我已阅读" position="right">
				<template #trigger><x-button :block="true" color="error">默认高度,禁用遮罩</x-button></template>
				<x-text color="#999999" >
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
				</x-text>
			</x-modal>
		</x-sheet>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-16">嵌套</x-text>
			<x-modal height="auto">
				<template v-slot:trigger><x-button color="success" :block="true">打开嵌套</x-button></template>
				<x-modal height="auto">
					<template v-slot:trigger><x-button color="success" :block="true">打开嵌套1</x-button></template>
					<x-text class="text-size-m text-grey  line-8">当前弹层内容为自动高度</x-text>
					<x-modal height="auto">
						<template v-slot:trigger><x-button color="success" :block="true">打开嵌套2</x-button></template>
						<x-text class="text-size-m text-grey  line-8">当前弹层内容为自动高度</x-text>
					</x-modal>
				</x-modal>
			</x-modal>

		</x-sheet>
		
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-16">异步阻止关闭</x-text>
			<x-modal :beforeClose="beforeClose" height="auto">
				<template #trigger><x-button :block="true">打开异步关闭</x-button></template>
				<x-text class="text-size-m text-grey  line-8">只能关闭或者取消关闭或者点遮罩关闭，点确认按钮会异步阻止关闭。</x-text>
			</x-modal>
		
		</x-sheet>
		
		
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-16">底部插槽及变量控制显示</x-text>
			<x-button @click="show = true" :block="true">打开</x-button>
			<x-modal v-model:show="show" position="bottom" :show-footer="true">
				<x-text color="#999999" >
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
				</x-text>
				<template #footer>
					<x-button @click="show=false" :block="true" color="red" class="flex-1">定义底部插槽</x-button>
				</template>
			</x-modal>
		</x-sheet>

	<view style="height:50px"></view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const show = ref(false)
	const show2 = ref(false)
	
	const onconfirm = () => {
		uni.navigateTo({
			url:"/pages/fankui/overlay"
		})
	}
	
	const beforeClose = ():Promise<boolean> => {
		return new Promise(res=>{
			setTimeout(function() {
				res(false)
			}, 2000);
		})
	}
</script>

<style lang="scss">

</style>
最近更新