Dialog 对话框

用于显示重要信息与获取用户确认，包含 BottomDialog / BlowDialog / PopperDialog / TouchTip 等多种形态。

BottomDialog 底部对话框

底部定位的对话框，带有可自定义的按钮与动画效果。

BottomDialog

底部滑入的确认对话框。

示例即将加载...

<template>
  <TxButton @click="bottomOpen = true">显示对话框</TxButton>
  <TxBottomDialog
    v-if="bottomOpen"
    title="确认操作"
    message="您确定要继续吗？"
    :btns="[
      { content: '取消', type: 'info', onClick: () => true },
      { content: '确认', type: 'success', onClick: async () => true },
    ]"
    :close="() => (bottomOpen = false)"
  />
</template>

按钮类型

const btns = [
  { content: '信息', type: 'info', onClick: () => true },
  { content: '警告', type: 'warning', onClick: () => true },
  { content: '错误', type: 'error', onClick: () => true },
  { content: '成功', type: 'success', onClick: () => true },
]

自动点击计时器

const btns = [
  {
    content: '自动确认',
    type: 'success',
    time: 5,
    onClick: () => true,
  },
]

加载状态

const btns = [
  {
    content: '提交',
    type: 'success',
    onClick: async () => {
      await saveData()
      return true
    },
  },
]

BlowDialog 爆炸对话框

带有戏剧性爆炸动画效果的居中对话框。

BlowDialog

突出展示的居中对话框。

示例即将加载...

<template>
  <TxButton @click="blowOpen = true">显示爆炸对话框</TxButton>
  <TxBlowDialog
    v-if="blowOpen"
    title="欢迎"
    message="<strong>你好！</strong> 欢迎使用我们的应用。"
    :close="() => (blowOpen = false)"
  />
</template>

PopperDialog 弹出对话框

PopperDialog

轻量弹出式提示。

示例即将加载...

<template>
  <TxButton @click="popperOpen = true">显示弹出对话框</TxButton>
  <TxPopperDialog
    v-if="popperOpen"
    title="Tip"
    message="这是一段提示内容。"
    :close="() => (popperOpen = false)"
  />
</template>

TouchTip 触控提示

TouchTip

面向触控场景的引导提示。

示例即将加载...

<template>
  <TxButton @click="tipOpen = true">显示 TouchTip</TxButton>
  <TxTouchTip
    v-if="tipOpen"
    title="提示"
    message="请选择一个操作。"
    :buttons="[
      { content: '取消', type: 'info', onClick: () => true },
      { content: '确定', type: 'success', onClick: async () => true },
    ]"
    :close="() => (tipOpen = false)"
  />
</template>

自定义组件

import CustomContent from './CustomContent.vue'

function showCustomDialog() {
  return h(TxBlowDialog, {
    comp: CustomContent,
    close: () => {},
  })
}

渲染函数

function showRenderDialog() {
  return h(TxBlowDialog, {
    render: () => h('div', [
      h('h2', '动态内容'),
      h('p', '使用渲染函数创建'),
    ]),
    close: () => {},
  })
}

API

TxBottomDialog 属性

属性名	类型	默认值	说明
`title`	`string`	`''`	对话框标题
`message`	`string`	`''`	对话框消息
`stay`	`number`	`0`	自动关闭时长 (毫秒)
`close`	`() => void`	必填	关闭回调
`btns`	`DialogButton[]`	`[]`	按钮配置
`icon`	`string`	`''`	图标类名
`index`	`number`	`0`	z-index 偏移量

DialogButton 接口

interface DialogButton {
  content: string
  type?: 'info' | 'warning' | 'error' | 'success'
  time?: number
  onClick: () => Promise<boolean> | boolean
  loading?: (done: () => void) => void
}

TxBlowDialog 属性

属性名	类型	默认值	说明
`title`	`string`	`''`	对话框标题
`message`	`string`	`''`	消息内容 (支持 HTML)
`close`	`() => void`	必填	关闭回调
`comp`	`Component`	`undefined`	自定义组件
`render`	`() => VNode`	`undefined`	渲染函数

TxPopperDialog 属性

属性名	类型	默认值	说明
`title`	`string`	`''`	对话框标题
`message`	`string`	`''`	消息内容 (支持 HTML)
`close`	`() => void`	必填	关闭回调
`comp`	`Component`	`undefined`	自定义组件
`render`	`() => VNode`	`undefined`	渲染函数

TxTouchTip 属性

属性名	类型	默认值	说明
`title`	`string`	`''`	标题
`message`	`string`	`''`	文本内容
`buttons`	`TouchTipButton[]`	`[]`	按钮配置
`close`	`() => void`	必填	关闭回调

无障碍支持

支持 ESC 关闭
打开时聚焦对话框容器或确认按钮
关闭时焦点恢复
自动补充 role="dialog"、aria-modal 与实例级标题/描述 ARIA 关联
DialogButton.onClick() 返回 true 时关闭，返回 false 时保持打开