T-Modal 模态框
- 示例代码路径：
/pages/components/t-modal/t-modal - 示例代码地址：https://gitee.com/turbo-ui/turbo-ui-demo/tree/master/pages/components/t-modal/t-modal
兼容端
| 安卓 | 苹果 | Web | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|
| ✅ | ✅ | ✅ | ❌ | ✅ |
使用示例
vue
<template>
<t-modal content="Turbo UI 对话框" v-model:show="state.show1">
<template v-slot:click>
<t-button type="primary">默认对话框</t-button>
</template>
</t-modal>
</template>
<script setup lang="uts">
type stateType = {
show1: boolean
}
const state = reactive<stateType>({
show1: false
})
</script>属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| zIndex | Number | 999 | 窗口层级 |
| title | String | "标题" | 标题 |
| show | Boolean | false | 显示窗口 |
| bgColor | String | '' | 背景颜色 |
| dark | Boolean | true | 是否开启暗黑模式 |
| height | String | "auto" | 对话框高度 |
| width | String | "300" | 对话框宽度 |
| round | Array | ['10','10'] | 对话框圆角 |
| pa | Array | ['10','10'] | 对话框内边距 |
| content | String | "" | 对话框内容 |
| contentHeight | String | "30" | 对话框内容高度 |
| maskColor | String | "rgba(0,0,0,0.1)" | 遮罩背景色 |
方法
| 方法名 | 说明 | 参数 |
|---|---|---|
| update:show | 更新显示状态 | Boolean: 显示/隐藏状态 |
| cancel | 取消事件 | - |
| confirm | 确认事件 | - |
插槽
| 插槽名 | 说明 |
|---|---|
| click | 触发模态框显示的元素插槽 |
| title | 标题区域插槽 |
| content | 内容区域插槽 |
| btn | 按钮区域插槽 |