ThorUI文档

# tui-dialog 对话框

介绍

Dialog，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiDialog from "@/components/thorui/tui-dialog/tui-dialog.vue"
export default {
	components:{
		tuiDialog
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 √ √ √ √ √ √ √

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-dialog": "/components/thorui/tui-dialog/tui-dialog"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

通过 buttons 属性设置对话框按钮，show 属性控制显示隐藏。

<!--uni-app-->
<tui-dialog :buttons="buttons" :show="show" title="提示" @close="close" @click="buttonTap">
	<template v-slot:content>
		标题、内容、按钮均可自定义
	</template>
</tui-dialog>

<!--微信小程序-->
<tui-dialog buttons="{{buttons}}" show="{{show}}" title="提示" bindclose="close" bindclick="buttonTap">
	<view slot="content">
		标题、内容、按钮均可自定义
	</view>
</tui-dialog>

//data数据

//只有确定按钮
buttons:[ {
	text: '确定',
	color: '#EB0909'
}]

//包含确定和取消按钮
buttons:[{
	text: '取消'
}, {
	text: '确定',
	color: '#586c94'
}]

# Slots

名称 说明
title 对话框标题自定义内容，也可直接使用属性 title
content 对话框内容
footer 对话框底部显示内容，当 buttons 属性值长度为0时生效

# Props

参数 类型 说明 默认值
title String 对话框标题 -
maskClosable Boolean 点击遮罩层是否关闭对话框 true
mask Boolean 是否需要遮罩层 true
show Boolean 是否显示对话框 false
buttons Array 对话框按钮 [ ]
backgroundColor String 对话框背景色 #fff
radius String 对话框圆角值 12px
titleColor String 对话框标题颜色 #333
contentColor String 对话框内容颜色 #999
buttons属性 Object对象参数说明

text 与 color 属性为必须项，其他额外参数可自定义扩展，点击按钮时会在事件中回传整个Object对象。

buttons:[{
	text: '确定', //按钮显示文本
	color: '#EB0909' //字体颜色
}]

# Events

事件名 说明 回调参数
click 对话框按钮点击时触发 {
  index : 按钮索引值 ,
  item : buttons属性值item项
}
close 点击遮罩时触发，关闭对话框 { }

# 预览

请以移动端效果为准，touch事件目前尚未完全在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-msg 提示页 →