mp-dialog 消息弹窗

支持通过 hooks 和 props 两种方式控制显示

代码演示

通过 hooks 方法控制显示

我们强烈建议使用 hooks 方法来控制组件的显示状态，而 mp-dialog 组件仅用作一个挂载组件。

基本使用：

<script setup>
import {useDialog} from '@ifanrx/uni-mp'

const {showDialog} = useDialog()

showDialog({
  title: '提示',
  content: '这是一条提示信息',
})
</script>

<template>
  <!-- 配合挂载 mp-dialog 组件 -->
  <mp-dialog ref="$dialog" />
</template>

详细使用方法见：弹窗控制 Hooks

通过 props 控制显示

当然现有 hooks 不满足使用，你也可以通过传入 props 来控制显示，以适配更多场景：

<template>
  <mp-dialog :visible="true" title="标题" @confirm="onConfirm" />
</template>

禁止页面滚动

介绍文档：禁止页面滚动

API

Props

Prop name	Description	Type	Values	Default
visible v-model	显示弹窗	boolean	-
type	提示类型	string	-	''
mode	弹窗模式	string	-	'base'
title	提示标题	string	-	''
content	提示内容，若不传则使用 slot 内容	string	-	''
confirmText	确认按钮文案	string	-	'确定'
cancelText	取消按钮文案	string	-	'取消'
confirmColor	确认按钮颜色	string	-	'#007aff'
cancelColor	取消按钮颜色	string	-	'#333'
showCancel		boolean	-	true
showConfirm		boolean	-	true
value	输入框值	string	-	''
inputType	输入框值	string	-	'text'
placeholder	输入框占位文本	string	-	''
beforeClose	点击按钮自动关闭，若设置为 false，则需要手动调用 close 方法	boolean	-	true
maskClosable	允许点击遮罩关闭弹窗	boolean	-	false

Expose

setOptions

(options: object) => void

设置 dialog 选项

open

() => void

打开 dialog

close

() => void

关闭 dialog

Events

Event name	Properties	Description
confirm	args any - 参数	点击确认时触发
cancel	args any - 参数	点击取消时触发

Slots

Name	Description	Bindings
default	弹窗内容，仅在 base 模式下生效

源码

组件 • 示例