# 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对象参数说明

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

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

    # Events

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

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

    # 预览

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

    # 特别说明

    该组件为 会员组件,非开源内容,需开通会员才可获取使用。

    # 线上程序扫码预览

    ThorUI组件库 H5二维码 ThorUI示例
    ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
    Last Updated: 7/21/2023, 2:12:46 PM