Modal 模态框，在浮层中显示，引导用户进行相关操作。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

通过 show 属性控制模态框的显示隐藏，title 属性设置模态框的标题，descr 属性设置模态框描述内容 ，@click 事件为模态框按钮点击事件。

 <wui-modal
        :show="show"
        title="提示"
        descr="确定关注 小程序 吗？"
        @click="onClick"
></wui-modal>

点遮罩可关闭

通过 show 属性控制模态框的显示隐藏，descr 属性设置模态框描述内容，maskClosable 属性控制是否可点击遮罩关闭模态框（需要结合 @cancel 事件设置 show 为 false 来达到关闭模态框）。

<wui-modal :show="show" :descr="descr" maskClosable @click="onClick" @cancel="onCancel"></wui-modal>

const descr = ref<any>('是否将此次编辑保留');
const show = ref<any>(false);
//调用此方法显示模态框
const showModal = ()=> {
    show.value = true;
}
//模态框按钮点击事件
const onClick = (e)=> {
    console.log(e)
    //...
    onCancel()
}
//关闭模态框
const onCancel = (e)=> {
    show.value = false;
}

//buttons 数据格式说明

//数据格式一，字符串数组
const buttons = ref(['按钮一', '按钮二'])

//数据格式二，以下为约定属性，其他属性可自行增加
const buttons = ref([
    {	//按钮文本，必选
        text: '确定',
        //按钮文本颜色，可选
        color: '#fff',
        //按钮背景颜色，可选
        background:'#465CFF',
        //是否为镂空按钮，即背景色为透明，可选
        plain: false
    }])

Slots

插槽名称	说明
default	模态框自定义内容

Props

属性名	类型	说明	默认值	平台差异说明
show	Boolean	是否显示模态框	false	-
title	String	标题	-	-
size	Number, String	标题字体大小，单位rpx	34	-
color	String	标题字体颜色	#333	-
descr	String	描述内容	-	-
descrSize	Number, String	描述内容字体大小，单位rpx	28	-
descrColor	String	描述内容字体颜色	#7F7F7F	-
buttons	Array	操作按钮，数据格式见下方说明	[{text: '取消',plain: true}, {text: '确定'}]	-
direction	String	操作按钮排列方向，可选值：row、column	row	-
radius	Number, String	按钮圆角值，单位rpx	16	-
width	Number, String	模态框宽度，单位rpx	640	-
background	String	模态框背景色	#FFFFFF	-
boxRadius	Number, String	模态框圆角值，单位rpx	16	-
padding	Number, String	模态框上下padding值，单位rpx	32	-
maskBackground	String	遮罩背景色	rgba(0,0,0,.6)	-
maskClosable	Boolean	点击遮罩是否可关闭模态框（设为true时，需结合@cancel事件，通过设置show为false关闭模态框）	false	-
zIndex	Number	模态框z-index值	1001	Nvue端不支持，默认越靠后的元素层级越高，即将组件放置最底部

Events

事件名	说明	回调参数
@click	点击模态框按钮时触发	{ index:按钮索引, ...this.buttons[index] }
@cancel	点击遮罩层（maskClosable=true）时触发	-