Dialog 对话框

显示标题、内容和一组操作按钮。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 对话框 -->
<fui-dialog :show="showDialog" title="提示" content="确认执行操作吗？"
  @click="handleDialogClick" @close="showDialog = false" />

在按钮处理方法中按返回的索引执行对应操作，并由页面更新 showDialog。

属性

属性	类型	说明	官网默认值
show	Boolean	是否显示	false
title	String	标题	提示
color	String	标题颜色	#333
content	String	内容文字	-
contentColor	String	内容颜色	#7F7F7F
buttons	Array	按钮对象数组，支持 text、color	取消、确定
background	String	对话框背景色	#fff
radius	Number / String	圆角，单位 rpx	24
maskBackground	String	遮罩颜色	rgba(0,0,0,.6)
maskClosable	Boolean	点击遮罩时是否触发 close	true

默认按钮为 [{ text: '取消' }, { text: '确定', color: '#465CFF' }]。

事件

事件	说明	回调参数
click	点击对话框按钮	包含 index 和按钮字段的对象
close	点击可关闭的遮罩	{}

本地源码在传入 content 时仍会显示默认插槽，需要替换内容时应同时清空 content。

插槽

插槽	说明
default	自定义对话框内容