Skip to content
On this page

组件库文档 tmui.design

对话框 Modal

弹出对话框,常用于消息提示、消息确认,或在当前页面内完成特定的交互操作,支持函数调用和组件调用两种方式


🌶️ 对话框 Modal 示例

查看模拟效果
示例模板
vue
<template>
    <tm-app>
        <tm-sheet>
            <tm-text :font-size="24" _class="font-weight-b" label="下面是基础演示属性,更多玩法请前往文档。"></tm-text>
            <tm-divider></tm-divider>
            <view class="flex flex-row flex-wrap ">
                <tm-button :margin="[0,12]" @click="showWin=true" color="white" :width="120" :height="56" :font-size="24"  label="默认"></tm-button>
                <tm-button :margin="[12,12]" @click="showWin1=true" color="red" :width="120" :height="56" :font-size="24"  label="分离按钮"></tm-button>
                <tm-button :margin="[0,12]" @click="showWin2=true" color="orange" :width="120" :height="56" :font-size="24"  label="个性化"></tm-button>
                <tm-button :margin="[12,12]" @click="showWin3=true" color="pink" :width="120" :height="56" :font-size="24"  label="异步关闭"></tm-button>
            </view>
			
			<tm-modal title="插槽触发" >
				<template v-slot:trigger>
					<tm-button block :margin="[12, 12]" :padding="[24,0]" color="grey-1" 
					    :height="56" :font-size="24" label="通过插槽触发弹层"></tm-button>
				</template>
				<tm-text :font-size="32" label="这里通过插槽触发弹层,无需定义show变量来控制显示和隐藏."></tm-text>
			</tm-modal>
           
        </tm-sheet>
        <tm-sheet :margin="[32,0]">
            <tm-text :font-size="24" _class="font-weight-b" label="下面是通过ref.open打开返回Promise示例。"></tm-text>
            <tm-divider></tm-divider>
            <view class="">
                <tm-button block @click="openDrawer" color="green" :font-size="28"  label="Ref打开,返回Promise"></tm-button>
            </view>
        </tm-sheet>
       <tm-modal  title="信息框" content="主体内容哦" v-model:show="showWin"></tm-modal>
       <tm-modal color="white" okColor="red"  cancelColor="red" okLinear="left" splitBtn title="信息框" content="主体内容哦" v-model:show="showWin1"></tm-modal>
       <tm-modal ref='modal' color="grey-5" :height="500" :border="0" text  okColor="black"  cancelColor="white"  linear="bottom" title="信息框"  v-model:show="showWin2">
           <view>
                <tm-input></tm-input>
               <tm-image src="https://picsum.photos/450/150" :height="150" :width="450"></tm-image>
               <tm-text label="主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦主体内容哦"></tm-text>
			   <tm-image src="https://picsum.photos/450/150?id=36" :height="150" :width="450"></tm-image>
           </view>
       </tm-modal>
       <tm-modal closeable  @ok="test" color="white" okColor="pink"  cancelColor="pink" okLinear="left" splitBtn title="信息框" content="关闭后会延迟关闭窗体" 
       v-model:show="showWin3" :beforeClose="beforeClose"></tm-modal>
    </tm-app>
</template>
<script lang="ts" setup>
import { ref,getCurrentInstance,nextTick } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app";
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmInput from "@/tmui/components/tm-input/tm-input.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmModal from "@/tmui/components/tm-modal/tm-modal.vue"
import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
import tmButton from "@/tmui/components/tm-button/tm-button.vue"
import tmImage from "@/tmui/components/tm-image/tm-image.vue"
const modal = ref<InstanceType<typeof tmModal> | null>(null)
uni.getSystemInfoSync()
const showWin = ref(false)
const showWin1 = ref(false)
const showWin2 = ref(false)
const showWin3 = ref(false)
function beforeClose(){
    return new Promise(res=>{
        setTimeout(() => {
            res(true)
        }, 1500);
    })
}

function test(e){
	console.log('ok事件点击')
}
async function openDrawer(){
	modal.value?.open()?.then(()=>{
        console.log('点了确认按钮')
        uni.showToast({title:"确认按钮",icon:'none'})
    }).catch(()=>{
        console.log('取消关闭')
        uni.showToast({title:"被关闭取消",icon:'none'})
    })
}
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
maskBooleanfalse是否显示遮罩
borderNumber1边框粗细
showBooleanfalse是否显示,双向绑定v-model:show
widthNumber500
heightNumber600
roundNumber, String12圆角像素
durationNumber300弹出动画的时间(毫秒)
overlayClickBooleantrue是否允许点击遮罩关闭
transprentBooleanfalse是否透明效果
closeableBooleanfalse是否显示关闭按钮(如果显示,标题栏被替换为左标题右关闭按钮)
colorStringwhite主题颜色
titleString''标题
okTextString完成确认按钮文字
okColorStringprimary确认按钮颜色
okLinearString''left:右->左,right:左->右,top:下->上,bottom:上->下
okLlinearDeepStringaccent渐变深浅,可选:accent,light,dark
btnRoundNumber24按钮圆角,只有在分享式按钮下才有作用
hideCancelBooleanfalse是否不显示取消按钮
beforeCloseFunction()=>true在关闭前执行的回调函数,Boolean或者Funciton,函数时返回false即阻止关闭。可以是异步Promise<boolean>
contentString''正文主体
disabledBooleanfalse是否禁用
titleStyleArray, String, Object[]标题的样式表
zIndexv3.1.03+Number, String999弹层的层级
teleportBooleantrue(仅H5支持禁用)是否使用teleport

🌹 事件

事件名参数返回数据描述
click
open显示抽屉
close关闭抽屉
okarg:any确认按钮
cancelarg:any取消按钮
update:showshowBoolean显示状态(更新v-model:show值)

手动ref调用open,可以传递参数:arg:any,,然后在上方事件中ok,cancel将会传回open打开时传递的数据

🌽 slot插槽

default内容插槽 title标题栏, button底部按钮栏 trigger可触发弹层的插槽占位内容,比如在里面布局按钮,输入框,点击这块内容可以直接显示弹层。

🥗 ref方法

方法名参数返回值描述
openarg:any显示
close隐藏

💏 文档贡献

此页文档由Kyour贡献,如果对该框架感兴趣的可以参与我们一同进步!