TModal / 弹窗

Modals display content requiring user attention or confirmation. Supports multiple sizes, centered display, scrollable content, and Teleport rendering. / 弹窗用于展示需要用户关注或确认的内容，支持多种尺寸、居中显示、滚动内容和 Teleport 渲染。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
`modelValue`	`boolean`	`false`	v-model for visibility
`title`	`string`	—	Dialog title
`size`	`'sm' \| 'lg' \| 'xl' \| 'fullscreen'`	—	Dialog size
`centered`	`boolean`	`false`	Vertically centered
`scrollable`	`boolean`	`false`	Scrollable content body
`closable`	`boolean`	`true`	Show close button
`closeOnBackdrop`	`boolean`	`true`	Close on backdrop click
`closeOnEsc`	`boolean`	`true`	Close on ESC key
`status`	`TablerColor`	—	Top status bar color
`blur`	`boolean`	`false`	Backdrop blur effect
`fullWidth`	`boolean`	`false`	Full width mode
`fullscreenBreakpoint`	`string`	—	Fullscreen breakpoint (e.g. `'lg-down'`)
`teleportTo`	`string`	`'body'`	Teleport target

Events / 事件

Event	Description / 说明
`@update:modelValue`	v-model update
`@open`	Before open / 打开前
`@close`	Before close / 关闭前
`@opened`	After open animation / 打开动画完成
`@closed`	After close animation / 关闭动画完成

Slots / 插槽

Slot	Description / 说明
`default`	Main body content / 主体内容
`header`	Custom header / 自定义头部
`title`	Custom title / 自定义标题
`footer`	Bottom action area / 底部操作区
`status`	Top status bar / 顶部状态条

Basic Usage / 基础用法

vue

<script setup lang="ts">
import { TModal } from '@gulcc/tabler-vue'

const visible = ref(false)
</script>

<template>
  <TButton color="primary" @click="visible = true">Open / 打开弹窗</TButton>

  <TModal v-model="visible" title="Confirm / 确认删除">
    <p>Are you sure? This cannot be undone. / 确定要删除吗？此操作不可撤销。</p>
    <template #footer>
      <TButton color="secondary" @click="visible = false">Cancel / 取消</TButton>
      <TButton color="danger" @click="handleDelete">Confirm / 确认删除</TButton>
    </template>
  </TModal>
</template>

Advanced Usage / 进阶场景

vue

<script setup lang="ts">
import { TModal } from '@gulcc/tabler-vue'

const visible = ref(false)
const isSaving = ref(false)

async function handleSave() {
  isSaving.value = true
  await submitForm()
  isSaving.value = false
  visible.value = false
}
</script>

<template>
  <!-- Large modal + centered + status bar / 大尺寸 + 居中 + 状态条 -->
  <TModal
    v-model="visible"
    title="Edit User / 编辑用户信息"
    size="lg"
    centered
    status="primary"
  >
    <!-- Custom header / 自定义头部 -->
    <template #header>
      <div class="d-flex align-items-center gap-2">
        <strong>Edit / 编辑信息</strong>
        <span class="badge bg-blue-lt">ID: 123</span>
      </div>
    </template>

    <!-- Form content / 表单内容 -->
    <form>
      <TInput v-model="name" label="Name / 姓名" wrapper-class="mb-3" />
      <TInput v-model="email" label="Email / 邮箱" wrapper-class="mb-3" />
    </form>

    <!-- Footer / 底部操作 -->
    <template #footer>
      <TButton color="secondary" @click="visible = false">Cancel / 取消</TButton>
      <TButton color="primary" :loading="isSaving" @click="handleSave">
        Save / 保存
      </TButton>
    </template>
  </TModal>

  <!-- Fullscreen modal / 全屏弹窗 -->
  <TModal
    v-model="fullscreenVisible"
    title="Fullscreen Detail / 全屏详情"
    size="fullscreen"
    blur
  >
    Fullscreen content / 全屏内容
  </TModal>
</template>

Tips / 避坑指南

Must use v-model to control visibility — directly modifying modelValue won't work
<TModal> defaults to Teleport to <body> — be aware of z-index stacking context
To intercept closing (e.g. unsaved changes), listen to @close and use nextTick to re-open
teleportTo can target other DOM selectors, but ensure the target element exists
Content is not vertically centered by default — use centered prop to enable

TModal / 弹窗 ​

Props / 属性 ​

Events / 事件 ​

Slots / 插槽 ​

Basic Usage / 基础用法 ​

Advanced Usage / 进阶场景 ​