Tui Plus Vapor

Appearance

t-dialog ​

Dialog 对话框

组件介绍 ​

t-dialog 用于显示对话框，支持底部和中间两种显示方向。底部对话框带有底部菜单按钮，中间对话框可关闭。两者都包含文本、图标、按钮等元素，用于展示提示信息和用户交互。组件内部使用 t-popup 实现弹出效果。

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

基础用法参考 demo/dialog/dialog.uvue，通过 ref 获取组件实例，调用 show 方法显示对话框。

vue
<template>
  <!-- 底部菜单对话框 -->
  <t-dialog title="提示" direction="bottom" ref="bottomDialog">
    <template #button>
      <t-button type="primary" class="mb-30">底部菜单</t-button>
    </template>
    <view class="bg-#fff m-30 p-30 r-50 fc">
      <text class="ttl2">显示技巧提醒</text>
      <t-icon type="primary" name="apple-fill" class="s-100! mt-30"></t-icon>
      <text class="sfwb s-40 mt-10">你学会了吗？</text>
      <text class="p-20 sls-2 slh-45 w-80% sta-c ttl3">
        风格与drawer样式不同的时两边和底部有间隙？风格是否喜欢呢？
      </text>
      <t-button type="primary" class="r-100! mt-50 w-80%" @click="closeBottom">我知道了哇</t-button>
    </view>
  </t-dialog>

  <!-- 中间提示对话框 -->
  <t-dialog title="提示" direction="center" ref="centerDialog" :popup-attrs="{'closeable':true}">
    <template #button>
      <t-button type="primary">中间提示</t-button>
    </template>
    <view class="bg-#fff r-20 fc w-650 p-30">
      <text class="ttl2">显示技巧提醒</text>
      <t-icon type="primary" name="apple-fill" class="s-100! mt-30"></t-icon>
      <text class="sfwb s-40 mt-10">你学会了吗？</text>
      <text class="p-20 sls-2 slh-45 w-80% sta-c ttl3">
        风格与drawer样式不同的时两边和底部有间隙？风格是否喜欢呢？
      </text>
      <t-button type="primary" class="r-100! mt-50 w-80%" @click="closeCenter">我知道了哇</t-button>
    </view>
  </t-dialog>
</template>

<script setup>
const bottomDialog = ref<ComponentPublicInstance | null>(null)
const centerDialog = ref<ComponentPublicInstance | null>(null)

function closeBottom() {
  bottomDialog.value?.$callMethod('show')
}

function closeCenter() {
  centerDialog.value?.$callMethod('show')
}
</script>

Props ​

属性名说明类型默认值
size组件尺寸，可选 large、medium、small、ministring'medium'
type组件主题类型，可选 info、primary、error、warning、successstring''
disabled是否禁用booleanfalse
effect组件显示主题，可选 normal、dark、light、plainstring'normal'
hover是否启用点击效果booleanfalse
path点击组件后跳转的页面路径；为空时仅响应事件string''
direction弹出方向，可选 center、left、right、top、bottomstring'center'
popupAttrs弹出层的属性配置，支持 t-popup 的所有属性UTSJSONObject{}

Events ​

事件名说明回调参数
click点击时触发UniPointerEvent
transitionend动画结束时触发-
initFinished组件初始化完成时触发，返回组件节点信息NodeInfo
touchstart触摸开始时触发-
touchend触摸结束时触发-
touchmove触摸移动时触发-
touchcancel触摸取消时触发-

Slots ​

插槽名说明
default对话框内容区域
button触发按钮区域，用于放置触发对话框的按钮

Methods ​

组件通过 defineExpose 暴露了以下实例方法：

方法名说明
show调用内部 t-popup 的 show 方法，用于切换对话框显示状态

popupAttrs 配置 ​

popupAttrs 支持传递 t-popup 组件的所有属性，常用的配置包括：

属性名说明类型默认值
closeable是否显示关闭按钮booleanfalse
closeIcon关闭图标名称string'close-fill'
maskClosable点击遮罩是否关闭booleantrue
duration动画持续时间number300