mView

Popup 弹出层

弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义。

平台差异说明

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

基本使用

  • 弹出层的内容通过slot传入，由用户自定义
  • 通过show绑定一个布尔值的变量控制弹出层的打开和收起
<template>
    <view class="page">
        <m-common title="弹窗" />
        <m-cell-group border>
            <m-cell
                title="基本使用"
                is-link
                @click="handelClick"
            />
        </m-cell-group>

        <m-popup :show="show">
            <view class="box">
                <text
                    class="btn"
                    @click="handleClose"
                >
                    关闭
                </text>
            </view>
        </m-popup>
    </view>
</template>

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

const show = ref(false)

const handelClick = () => {
    show.value = true
}

const handleClose = () => {
    show.value = false
}
</script>

<style lang="scss" scoped>
.page {
    .box {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: $m-pad;
    }

    .btn {
        background-color: $m-primary;
        color: white;
        padding: 10px 20px;
        border-radius: 4px;
    }
}
</style>

设置弹出层的方向

可以通过mode参数设置，可以设置为left、top、right、bottom、center

<m-popup mode="left" />

设置弹出层的圆角

需要将round设置为圆角值(仅对mode = top | bottom | center有效)。

<m-popup round="10" />

API

Props

参数说明类型默认值可选值
show是否展示弹窗Booleanfalsetrue
overlay是否显示遮罩Booleantruefalse
mode弹出方向Stringbottomtop | right | left | center
duration遮罩打开或收起的动画过渡时间，单位msNumber | String300-
overlayStyle遮罩自定义样式，一般用于修改遮罩颜色，如：{background: 'rgba(3, 100, 219, 0.5)'}Object | String--
overlayOpacity遮罩透明度，0-1之间，勿与overlayStyle共用Number | String0.5-
closeOnClickOverlay点击遮罩是否关闭弹窗（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调）Booleantruefalse
zIndex弹出层的z-index值Number | String10075-
safeAreaInsetBottom是否为留出底部安全距离Booleantruefalse
safeAreaInsetTop是否为留出顶部安全距离Booleanfalsetrue
closeIconPos自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角Stringtop-righttop-left | bottom-left | bottom-right
round设置圆角值，仅对mode = top | bottom | cener有效Number | String0-
zoom当mode=center时 是否开启缩放Booleantruefalse
bgColor背景色，一般用于特殊弹窗内容场景，设置为transparent可去除默认的白色背景String--
customStyle用户自定义样式Object--

Slot

名称说明
default弹出层的内容

Event

事件名说明回调参数
open弹出层打开-
close弹出层收起-