Modal 模态框

弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。

平台差异说明

App(vue)	App(nvue)	H5	小程序
√	×	√	√

基本使用

默认情况下，模态框只有一个确认按钮：

• 请至少要配置弹框的内容参数content。
• 通过show绑定一个布尔变量来控制模态框的显示与否。

<template>
    <view>
        <m-common title="模态框" />
        <m-cell-group border>
            <m-cell
                title="基本使用"
                is-link
                @click="handleClick"
            />
        </m-cell-group>

        <m-modal
            :show="show"
            title="标题"
            content="感谢使用mView作为你项目UI框架"
            @confirm="show = false"
        />
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const show = ref(false)

const handleClick = () => {
    show.value = true
}
</script>

传入自定义内容

有时候我们需要给模态框的内容，不一定是纯文本的字符串，可能会需要换行，嵌入其他元素等，这时候我们可以使用slot功能。

<m-modal>
    <view>
        我是自定义内容
    </view>    
</m-modal>

点击遮罩关闭

有时候我们不显示"关闭"按钮的时候，需要点击遮罩也可以关闭Modal，这时通过配置closeOnClickOverlay为true即可（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调）

<m-modal close-on-click-overlay  />

控制模态框宽度

可以通过设置width参数控制模态框的宽度，不支持百分比，可以数值，px，rpx单位。

<m-modal width="300"  />

缩放效果

开启缩放效果，在打开和收起模态框的时候，会带有缩放效果，具体效果请见示例，此效果默认开启，通过zoom参数配置。

<m-modal :zoom="false"  />

API

Props

参数	说明	类型	默认值	可选值
show	是否显示模态框，请赋值给show	Boolean	false	true
title	标题内容	String	-	-
content	模态框内容，如传入slot内容，则此参数无效	String	-	-
confirmText	确认按钮的文字	String	确认	-
cancelText	取消按钮的文字	String	取消	-
showConfirmButton	是否显示确认按钮	Boolean	true	false
showCancelButton	是否显示取消按钮	Boolean	false	true
confirmColor	确认按钮的颜色	String	config.color['m-primary']	-
cancelColor	取消按钮的颜色	String	color['m-content-color']	-
buttonReverse	对调确认和取消的位置	Boolean	false	true
zoom	是否开启缩放模式	Boolean	true	false
closeOnClickOverlay	是否允许点击遮罩关闭Modal（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调）	Boolean	false	true
negativeTop	往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位	Number | String	0	-
width	modal宽度，不支持百分比，可以数值，px，rpx单位	Number | String	650rpx	-

Slot

名称	说明
default	传入自定义内容
confirmButton	传入自定义按钮

Event

事件名	说明	回调参数
confirm	点击确认按钮时触发	-
cancel	点击取消按钮时触发	-
close	点击遮罩关闭出发，closeOnClickOverlay为true有效	-