TMUI 3.2(11-21)
键入关键记事 K

Appearance

On this page
你当前查看的文档是tmui3.2.0（已不再支持NVUE）
[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

反馈组件 ​

对话框 TmModal ​

可全局统一更改风格。使用时注意下：如果height:auto，将失去内容滚动效果。如果要内容滚动height必定是一个值。

🌶️ 示例 ​

查看模拟效果＋
示例模板
vue
<script setup lang="ts">
import { ref } from "vue"
const show = ref(false)
</script>
<template>
    <view>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">对话框 tmModal</tm-text>
            <tm-text color="#999999">可全局统一更改风格。</tm-text>
        </tm-sheet>
        <tm-sheet class="flex flex-row flex-row-center-center">
            <tm-modal style="flex:1;margin-right:24rpx" height="auto">
                <template v-slot:trigger><tm-button :block="true">自动内容高</tm-button></template>
                <tm-input dark-bg-color="" placeholder="请输入密码"></tm-input>
                <tm-input dark-bg-color="" class="my-12" placeholder="请输入密码"></tm-input>
                <view class="flex flex-row flex-row-center-between">
                    <tm-text class="text-size-m text-grey">同意协议</tm-text>
                    <tm-switch ></tm-switch>
                </view>
            </tm-modal>

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

        </tm-sheet>

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

        </tm-sheet>

        <tm-sheet>
			<tm-text font-size="36" class=" text-weight-b mb-10 d-block">默认高度，禁用遮罩关闭</tm-text>
			<tm-text color="#999999" class="mb-24 d-block">
				点击遮罩禁用关闭,同时内容出现弹跳提示
			</tm-text>
			
			<tm-modal :overlayClick="false" :showCancel="false" height="550rpx" title="请阅读协议" confirmText="我已阅读" position="right">
				<template #trigger><tm-button :block="true" color="error">禁用遮罩,弹跳提醒</tm-button></template>
				<tm-text color="#999999" >
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
					精致美观的对话框，可全局配置风格
				</tm-text>
			</tm-modal>
		</tm-sheet>

        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-24 d-block">底部插槽及变量控制显示</tm-text>
            <tm-button @click="show = true" :block="true">打开</tm-button>
            <tm-modal v-model:show="show" title="内容可滚动" height="500rpx" position="bottom" :show-footer="true">
                <tm-text color="#999999">
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                </tm-text>
                <template #footer>
                    <tm-button @click="show = false" :block="true" color="red" class="flex-1">定义底部插槽</tm-button>
                </template>
            </tm-modal>
        </tm-sheet>

        <view style="height:50px"></view>

    </view>
</template>

🌶️ 兼容性 ​

平台兼容

H5uniAPP小程序version
☑️☑️☑️☑️

🌱 参数 ​

参数名类型默认值描述
customStylestring""自定义遮罩样式
titlestring"标题"标题
showFooterbooleantrue显示底部操作栏
showTitlebooleantrue是否显示底部关闭按钮
showClosebooleanfalse是否显示底部关闭按钮
showCancelbooleantrue显示取消按钮
overlayClickbooleantrue遮罩是否允许点击被关闭
showbooleanfalse显示可v-model:show双向绑定
durationnumber250动画时间
cancelTextstring"取消"取消按钮的文本
confirmTextstring"确认"确认按钮的文本
roundstring|number""打开方向为上和下时的圆角空值时，取全局配置的圆角。
widthstring|number"84%"宽，百分比，Px,rpx，auto都支持
heightstring|number"350"宽，百分比，Px,rpx，auto都支持
maxHeightstring|number"80%"可以是百分比,px,rpx单位数字。如果你不带单位，默认转换为rpx单位。
disabledScrollbooleanfalse是否禁用内部的scroll标签禁用后内容不会滚动，如果设定了指定高，内容超出指定高，会被裁切但如果没有指定高，内容自动的话，高是自动的。有这个属性是因为截止4.03scroll-view里面放input不会上推键盘，及内部的viewtouchMove会失效。
bgColorstring"white"容器背景色
darkBgColorstring""暗黑时的容器背景色，不填写的话取sheetDarkColor
zIndexstring|number"1105"-
contentPaddingstring|number"32"内容区域的间隙

🌹 事件 ​

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

🌽 slot插槽 ​

插槽名数据描述
trigger名称：binding,show 类型：Boolean
标签触发显示遮罩，免于使用变量控制
title名称：binding,show 类型：Boolean
标题插槽
default-默认插槽
footer-底部操作栏

🥗 ref方法 ​

方法名参数返回值描述