Dialog 对话框

用于显示一个对话框，支持提示、确认、输入等。

基本使用

dialog.value.open({
  // 属性
  title: '',
  msg: '',
  // ... 其他属性

  // 回调事件
  msgClick:()=>{},
  close:()=>{},
  // 按钮回调事件
  confirm:()=>{},
  cancel:()=>{},
  //btn2:()=>{},
  // ... btn{其余按钮所在索引}:()=>{},
})

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
name	String	null	标识，在事件或回调中返回
title	String	null	标题
titleProps	Object	null	标题配置 详细参考c-text的props	All
titleDivider	Boolean,Object	false	是否显示标题下分割线	All
btnDivider	Boolean,Object	true	显示按钮分割线，webStyle=false有效	All
dividerProps	Object	{"borderColor":"c-bdr-light"}	分割线配置，参考c-divider的props	All
msg	String,Array	null	内容 为array时，参考c-text的props	All
msgProps	Object	{}	msg的默认配置 参考c-text的props	All
width	String,Number	600rpx	宽度	All
webStyle	Boolean	false	是否web风格的对话框	All
icon	String,Object	null	显示icon object请c-icon组件的pros	All
iconPosition	String	top	icon位置，left、top、title	All
btn	Array,Boolean	false	自定义按钮 为true时：['取消','确认']，可通过btnReverse调换功能位置 为false时，不显示按钮，只显示一个按钮如下： -隐藏“取消”按钮：[null,'确认']、[false,true]、['',true] -隐藏“确认”按钮：[true,null]，['取消',null],['取消'] 数组项为Object参考c-btn的props，例如：[{text:'取消',type:'success'}]	All
btnReverse	Boolean	false	反转取消和确认按钮功能位置 影响confirm和cancel事件	All
btnAlign	String	null	按钮排列 webStyle=false值：row，column，默认row webStyle=true：left、center、right，默认right	All
btnProps	Object	{}	按钮的默认配置	All
confirmBtnProps	Object	{}	确认按钮配置	All
controlType	String	input	为prompt时的输入框组件类型 可选值input，textarea	All
controlProps	Object	null	为prompt时的输入框组件配置	All
radius	Number,String	16rpx	圆角	All
maskBgColor	String	rgba(0, 0, 0, 0.4)	弹出层背景	All
animation	Boolean	true	开启动画	All
headerStyle	Object	{}	header的样式	All
bodyStyle	Object	{}	body的样式	All
footerStyle	Object	{}	footer的样式	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

事件

事件名	说明
close	参数{name}
btnClick	参数{btn,name,props}
msgClick	参数{text,index,name}
getphonenumber	参数e,{btn,name}，参考uni-app的button组件
getuserinfo	参数e,{btn,name}，参考uni-app的button组件
error	参数e,{btn,name}，参考uni-app的button组件
opensetting	参数e,{btn,name}，参考uni-app的button组件
launchapp	参数e,{btn,name}，参考uni-app的button组件
contact	参数e,{btn,name}，参考uni-app的button组件
chooseavatar	参数e,{btn,name}，参考uni-app的button组件
addgroupapp	参数e,{btn,name}，参考uni-app的button组件
chooseaddress	参数e,{btn,name}，参考uni-app的button组件
chooseinvoicetitle	参数e,{btn,name}，参考uni-app的button组件
subscribe	参数e,{btn,name}，参考uni-app的button组件
login	参数e,{btn,name}，参考uni-app的button组件
im	参数e,{btn,name}，参考uni-app的button组件

插槽

插槽名	说明
titleIcon	iconPosition='title'且title和icon不为空时有效
bodyIcon	iconPosition='left/top'且icon不为空时有效
default	用于自定义展示内容
msgAfter	显示的内容下方
footer	按钮下方

方法

名称	说明
open(null|props)	打开Dialog 传递props时，将覆盖组件props
close()	关闭
alert(null|props)	提示
confirm(null|props)	确认
prompt(null|props)	输入

示例

<template>
  <c-dialog ref="dialog" />
  <c-btn text="打开对话框" @click="open()" />
</template>
<script setup>
import {ref} from 'vue';

const dialog = ref(null);
function open() {
  dialog.value.alert({
    title: '提交成功',
    icon:{name:'success',color:'c-t-success'},
    msg: [{text:'恭喜你，提交成功',fontSize:16,cClass:['c-mb-5']},'我们会尽快与您取得联系'],
    confirm:()=>{
      console.log('点击了确认');
    }
  })
}
</script>