mp-popup 基础弹窗

介绍文档：弹窗组件

代码演示

这是一个基于 uni-popup 封装的弹窗组件，相较于 uni-popup 组件，它解决了以下问题：

支持通过 visible 属性来控制弹窗的显示和隐藏。 解决了在嵌套弹窗情况下的遮罩定位问题。 因此，如果在项目中需要自定义弹窗，建议始终使用这个封装的组件作为基础组件。

<script setup>
import {useToggle} from '@vueuse/core'

const [visible, toggleVisible] = useToggle(false)
</script>

<template>
  <view>
    <button @click="toggleVisible(true)">打开弹窗</button>
    <mp-popup v-model:visible="visible" type="bottom">底部弹出 Popup</mp-popup>
  </view>
</template>

禁止页面滚动

介绍文档：禁止页面滚动

---

TIP

其它属性和默认值请参考 uni-popup 组件。

API

Props

Prop name	Description	Type	Values	Default
visible v-model	显示弹窗	boolean	-
type	弹出方式	string	-	'center'
top	top 值	number	-	null

Expose

open

() => void

显示弹窗

close

() => void

关闭弹窗

Events

Event name	Properties	Description
change	event {show: boolean, type: string} - 返回值	显示状态发生改变
maskClick		点击遮罩

Slots

Name	Description	Bindings
default

源码

组件 • 示例