组件库文档 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-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
mask | Boolean | false | 是否显示遮罩 |
border | Number | 1 | 边框粗细 |
show | Boolean | false | 是否显示,双向绑定v-model:show |
width | Number | 500 | 宽 |
height | Number | 600 | 高 |
round | Number, String | 12 | 圆角像素 |
duration | Number | 300 | 弹出动画的时间(毫秒) |
overlayClick | Boolean | true | 是否允许点击遮罩关闭 |
transprent | Boolean | false | 是否透明效果 |
closeable | Boolean | false | 是否显示关闭按钮(如果显示,标题栏被替换为左标题右关闭按钮) |
color | String | white | 主题颜色 |
title | String | '' | 标题 |
okText | String | 完成 | 确认按钮文字 |
okColor | String | primary | 确认按钮颜色 |
okLinear | String | '' | left:右->左,right:左->右,top:下->上,bottom:上->下 |
okLlinearDeep | String | accent | 渐变深浅,可选:accent,light,dark |
btnRound | Number | 24 | 按钮圆角,只有在分享式按钮下才有作用 |
hideCancel | Boolean | false | 是否不显示取消按钮 |
beforeClose | Function | ()=>true | 在关闭前执行的回调函数,Boolean或者Funciton,函数时返回false即阻止关闭。可以是异步Promise<boolean> |
content | String | '' | 正文主体 |
disabled | Boolean | false | 是否禁用 |
titleStyle | Array, String, Object | [] | 标题的样式表 |
zIndexv3.1.03+ | Number, String | 999 | 弹层的层级 |
teleport | Boolean | true | (仅H5支持禁用)是否使用teleport |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
click | |||
open | 显示抽屉 | ||
close | 关闭抽屉 | ||
ok | arg:any | 确认按钮 | |
cancel | arg:any | 取消按钮 | |
update:show | show | Boolean | 显示状态(更新v-model:show值) |
手动ref调用open,可以传递参数:arg:any,,然后在上方事件中ok,cancel将会传回open打开时传递的数据
🌽 slot插槽
default内容插槽 title标题栏, button底部按钮栏 trigger可触发弹层的插槽占位内容,比如在里面布局按钮,输入框,点击这块内容可以直接显示弹层。
🥗 ref方法
方法名 | 参数 | 返回值 | 描述 |
---|---|---|---|
open | arg:any | 显示 | |
close | 隐藏 |
💏 文档贡献
此页文档由Kyour贡献,如果对该框架感兴趣的可以参与我们一同进步!