# 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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		show: false,
 		buttons:[{
 			text: '取消'
 		 }, {
 			text: '确定',
 			color: '#586c94'
 		}]
 	}
 },
 methods: {
 	// 调用此方法显示dialog
 	 shown() {
 		this.show = true
 	},
 	close() {
 		this.show = false
 	},
 	buttonTap(e){
 		console.log(e)
 		this.close()
 	}
 }
}

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

// data 数据 及 方法
Page({
  data: {
 	 show: false,
      buttons:[{
    	   text: '取消'
     }, {
    	   text: '确定',
    	   color: '#586c94'
    }]
  },
  // 调用此方法显示dialog
  shown() {
 	 this.setData({
 		show:true
 	 })
  },
  close() {
 	this.setData({
 	   show:false
 	})
  },
  buttonTap(e){
  	console.log(e)
  	this.close()
  }
})

// Make sure to add code blocks to your code group

# 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

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

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