Modal 模态框

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

平台差异说明

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>
export default {
	data() {
		return {
			show:false,
			title:'标题',
			content:'uView的目标是成为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>
export default {
	data() {
		return {
			show:false,
			title:'标题',
			content:`空山新雨后<br>
					天气晚来秋`
		};
	}
};
</script>

异步关闭

异步关闭只对"确定"按钮起作用，需要设置asyncClose为true，当点击确定按钮的时候，按钮的文字变成一个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>
export default {
    data() {
        return {
			show: false
		}
	},
	onLoad: function(opt) {
		
	},
	methods:{
		showModal() {
			this.show = true;
		},
		confirm() {
			setTimeout(() => {
				// 3秒后自动关闭
				this.show = false;
			}, 3000)
		}
    }
}
</script>

点击遮罩关闭

有时候我们不显示"关闭"按钮的时候，需要点击遮罩也可以关闭Modal，这时通过配置closeOnClickOverlay为true即可（注意：关闭事件需要自行处理，只会在开启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	-
duration 2.0.37	弹窗动画过度时间	Number	400	-
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(方形)

Event

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

Slots

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