# t-dialog

Dialog 对话框

t-dialog 组件介绍

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

t-dialog 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-dialog 基础用法

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

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-dialog direction="bottom"
				  ref="centerDialog">
			<template #button>
				<t-button type="primary"
						  class="mb-15">底部菜单</t-button>
			</template>
			<view :class="[`tvg m-15 p-15 r-25 fc`]">
				<text :class="`ttl2`">显示技巧提醒</text>
				<t-icon type="primary"
						name="apple-fill"
						class="s-50! mt-15"></t-icon>
				<text :class="[`sfwb s-20 mt-5 ttc-`]">你学会了吗？</text>
				<text class="p-10 sls-2 slh-23 w-80% sta-c"
					  :class="`ttl3`">风格与drawer样式不同的时两边和底部有间隙？风格是否喜欢呢？</text>
				<t-button type="primary"
						  class="r-50! mt-25 w-80%"
						  @click="show">我知道了哇</t-button>
			</view>
		</t-dialog>
		<t-dialog direction="center"
				  ref="centerDialog1"
				  :popup-attrs="{'closeable':true}">
			<template #button>
				<t-button type="primary">中间提示</t-button>
			</template>
			<view :class="[`tvg r-10 fc w-325 p-15`]">
				<text :class="`ttl2`">显示技巧提醒</text>
				<t-icon type="primary"
						name="apple-fill"
						class="s-50! mt-15"></t-icon>
				<text :class="[`sfwb s-20 mt-5 ttl1`]">你学会了吗？</text>
				<text class="p-10 sls-2 slh-23 w-80% sta-c"
					  :class="`ttl3`">风格与drawer样式不同的时两边和底部有间隙？风格是否喜欢呢？</text>
				<t-button type="primary"
						  class="r-50! mt-25 w-80%"
						  @click="show1">我知道了哇</t-button>
			</view>
		</t-dialog>
	</view>
</template>

<script setup>
	import { ref } from 'vue'

	const centerDialog = ref<ComponentPublicInstance | null>(null)
	const centerDialog1 = ref<ComponentPublicInstance | null>(null)

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

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

t-dialog Props

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

t-dialog Events

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

t-dialog Slots

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

Methods

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

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

popupAttrs 配置

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

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