当前位置: 首页 > 文档资料 > uView 开发文档 >

Modal 模态框

优质
小牛编辑
137浏览
2023-12-01

Modal 模态框 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

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

  • 请至少要配置弹框的内容参数content
  • 通过v-model绑定一个布尔变量来控制模态框的显示与否。
<template>
	<view>
		<u-modal v-model="show" :content="content"></u-modal>
		<u-button @click="open">
			打开模态框
		</u-button>
	</view>
</template>
	
<script>
	export default {
		data() {	
			return {
				show: false,
				content: '东临碣石,以观沧海'
			}
		},
		methods: {
			open() {
				this.show = true;
			}
		}
	}
</script>

传入富文本内容

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

<template>
	<view>
		<u-modal v-model="show" :title-style="{color: 'red'}">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
		<u-button @click="open">
			打开模态框
		</u-button>
	</view>
</template>
	
<script>
	export default {
		data() {	
			return {
				show: false,
				content: `
					空山新雨后<br>
					天气晚来秋
				`
			}
		},
		methods: {
			open() {
				this.show = true;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding-left: 30rpx;
	}
</style>

异步关闭

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

<template>
	<view class="">
		<u-modal v-model="show" @confirm="confirm" ref="uModal" :async-close="true"></u-modal>
		<u-button @click="showModal">弹起Modal</u-button>
	</view>
</template>

<script>
export default {
    data() {
        return {
			show: false
		}
	},
	onLoad: function(opt) {
		
	},
	methods:{
		showModal() {
			this.show = true;
		},
		confirm() {
			setTimeout(() => {
				// 3秒后自动关闭
				this.show = false;
				// 如果不想关闭,而单是清除loading状态,需要通过ref手动调用方法
				// this.$refs.uModal.clearLoading();
			}, 3000)
		}
    }
}
</script>

点击遮罩关闭

有时候我们不显示"关闭"按钮的时候,需要点击遮罩也可以关闭Modal,这时通过配置mask-close-abletrue即可

<u-modal v-model="show" :mask-close-able="true"></u-modal>

控制模态框宽度

可以通过设置width参数控制模态框的宽度,此值可以为数值(单位rpx),百分比,auto等。

<u-modal v-model="show" width="70%"></u-modal>

自定义样式

此组件有完善的自定义功能,可以配置标题,内容,按钮等样式(传入对象形式),具体参数详见底部的API说明

<u-modal v-model="show" :title-style="{color: 'red'}"></u-modal>

缩放效果

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

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

API

Props

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

参数说明类型默认值可选值
show是否显示模态框,请赋值给v-modelBooleanfalsetrue
z-index层级String | Number1075-
title标题内容String提示-
width模态框宽度,数值时单位为rpxString | Number600百分比 / auto
content模态框内容,如传入slot内容,则此参数无效String内容-
show-title是否显示标题Booleantruefalse
show-confirm-button是否显示确认按钮Booleantruefalse
show-cancel-button是否显示取消按钮Booleanfalsetrue
confirm-text确认按钮的文字String确认-
cancel-text取消按钮的文字String取消-
cancel-color取消按钮的颜色String#606266-
confirm-color确认按钮的颜色String#2979ff-
border-radius模态框圆角值,单位rpxString | Number16-
title-style自定义标题样式,对象形式Object--
content-style自定义内容样式,对象形式Object--
cancel-style自定义取消按钮样式,对象形式Object--
confirm-style自定义确认按钮样式,对象形式Object--
zoom是否开启缩放模式Booleantruefalse
async-close是否异步关闭,只对确定按钮有效,见上方说明Booleanfalsetrue
mask-close-able是否允许点击遮罩关闭ModalBooleanfalsetrue
negative-top往上偏移的值,以避免可能弹出的键盘重合,单位任意,数值则默认为rpx单位 1.4.4String | Number0-

Event

事件名说明回调参数
confirm点击确认按钮时触发-
cancel点击取消按钮时触发-

Method

此方法需要通过ref调用,详见上方的"异步关闭"

事件名说明
clearLoading异步控制时,通过调用此方法,可以不关闭Modal,而单是清除loading状态

Slots

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