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

# 平台差异说明

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

# 基本使用

默认情况下,模态框只有一个确认按钮:

  • 请至少要配置弹框的内容参数content
  • 通过show绑定一个布尔变量来控制模态框的显示与否。
<template>
	<view >
		<up-modal :show="show" :title="title" :content='content'></up-modal>
		<up-button @click="show = true">打开</up-button>
	</view>
</template>
<script setup>  
import { ref } from 'vue';  
  
// 使用 ref 创建响应式数据  
const show = ref(false);  
const title = ref('标题');  
const content = ref('uview-plus的目标是成为uni-app生态最优秀的UI框架');  
</script>
<script>
export default {
	data() {
		return {
			show:false,
			title:'标题',
			content:'uview-plus的目标是成为uni-app生态最优秀的UI框架'
		};
	}
};
</script>

# 传入富文本内容

有时候我们需要给模态框的内容,不一定是纯文本的字符串,可能会需要换行,嵌入其他元素等,这时候我们可以使用slot功能,再结合uni-apprictText组件, 就能传入富文本内容了,如下演示:

<template>
	<view >
		<up-modal :show="show"  :title="title" >
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</up-modal>
		<up-button @click="show = true">打开</up-button>
	</view>
</template>
<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const show = ref(false);  
const title = ref('标题');  
const content = ref(`空山新雨后<br>  
                      天气晚来秋`);  
</script>
<script>
export default {
	data() {
		return {
			show:false,
			title:'标题',
			content:`空山新雨后<br>
					天气晚来秋`
		};
	}
};
</script>

# 异步关闭

异步关闭只对"确定"按钮起作用,需要设置asyncClosetrue,当点击确定按钮的时候,按钮的文字变成一个loading动画,此动画的颜色为 confirm-color参数的颜色,同时Modal不会自动关闭,需要手动设置通过show绑定的变量为false来实现手动关闭。

<template>
	<view class="">
		<up-modal :show="show" @confirm="confirm" ref="uModal" :asyncClose="true"></up-modal>
		<up-button @click="showModal">弹起Modal</up-button>
	</view>
</template>
<script setup>  
import { ref } from 'vue';  
import { onLoad, onShow } from "@dcloudio/uni-app";  
  
// 创建响应式数据  
const show = ref(false);  
  
// 方法  
const showModal = () => {  
    show.value = true;  
};  
  
const confirm = () => {  
    setTimeout(() => {  
        // 3秒后自动关闭  
        show.value = false;  
    }, 3000);  
};  
  
// uni-app 的生命周期钩子  
onLoad((opt) => {  
    // 页面加载时执行的代码  
    console.log('页面加载了', opt);  
});  
  
onShow(() => {  
    // 页面显示时执行的代码  
    console.log('页面显示了');  
});  
</script>
<script>
export default {
    data() {
        return {
			show: false
		}
	},
	onLoad: function(opt) {
		
	},
	methods:{
		showModal() {
			this.show = true;
		},
		confirm() {
			setTimeout(() => {
				// 3秒后自动关闭
				this.show = false;
			}, 3000)
		}
    }
}
</script>

# 点击遮罩关闭

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

<up-modal :show="show" :closeOnClickOverlay="true"></up-modal>

# 控制模态框宽度

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

<up-modal v-model="show" width="300px"></up-modal>

# 缩放效果

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

<up-modal v-model="show" :zoom="false"></up-modal>

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Props

注意:需要给modal组件通过show绑定一个布尔值,来初始化modal的状态,随后该值被双向绑定。

参数 说明 类型 默认值 可选值
show 是否显示模态框,请赋值给show Boolean false true
title 标题内容 String - -
content 模态框内容,如传入slot内容,则此参数无效 String - -
confirmText 确认按钮的文字 String 确认 -
cancelText 取消按钮的文字 String 取消 -
showConfirmButton 是否显示确认按钮 Boolean true false
showCancelButton 是否显示取消按钮 Boolean false true
confirmColor 确认按钮的颜色 String #2979ff -
cancelColor 取消按钮的颜色 String #606266 -
buttonReverse 对调确认和取消的位置 Boolean false true
zoom 是否开启缩放模式 Boolean true false
asyncClose 是否异步关闭,只对确定按钮有效,见上方说明 Boolean false true
closeOnClickOverlay 是否允许点击遮罩关闭Modal(注意:关闭事件需要自行处理,只会在开启closeOnClickOverlay后点击遮罩层执行close回调) Boolean false true
negativeTop 往上偏移的值,给一个负的margin-top,往上偏移,避免和键盘重合的情况,单位任意,数值则默认为rpx单位 String | Number 0 -
width modal宽度,不支持百分比,可以数值,px,rpx单位 String | Number 650rpx px | rpx
confirmButtonShape 确认按钮的样式,如设置,将不会显示取消按钮 String - circle(圆形) | square(方形)
contentTextAlign 文案对齐方式 String left left | center | right

# Event

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

# Slots

名称 说明
default 传入自定义内容,一般为富文本,见上方说明
confirmButton 传入自定义按钮,用于在微信小程序弹窗通过按钮授权的场景