弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
默认情况下，模态框只有一个确认按钮：
- 请至少要配置弹框的内容参数
content。 - 通过
show绑定一个布尔变量来控制模态框的显示与否。
<template> <view > <u-modal :show="show" :title="title" :content='content'></u-modal> <u-button @click="show = true">打开</u-button> </view> </template> <script> export default { data() { return { show:false, title:'标题', content:'uView的目标是成为uni-app生态最优秀的UI框架' }; } }; </script>
copy
#传入富文本内容
有时候我们需要给模态框的内容，不一定是纯文本的字符串，可能会需要换行，嵌入其他元素等，这时候我们可以使用slot功能，再结合uni-apprictText组件， 就能传入富文本内容了，如下演示：
<template> <view > <u-modal :show="show" :title="title" > <view class="slot-content"> <rich-text :nodes="content"></rich-text> </view> </u-modal> <u-button @click="show = true">打开</u-button> </view> </template> <script> export default { data() { return { show:false, title:'标题', content:`空山新雨后<br> 天气晚来秋` }; } }; </script>
copy
#异步关闭
异步关闭只对"确定"按钮起作用，需要设置asyncClose为true，当点击确定按钮的时候，按钮的文字变成一个loading动画，此动画的颜色为 confirm-color参数的颜色，同时Modal不会自动关闭，需要手动设置通过show绑定的变量为false来实现手动关闭。
<template> <view class=""> <u-modal :show="show" @confirm="confirm" ref="uModal" :asyncClose="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; }, 3000) } } } </script>
copy
#点击遮罩关闭
有时候我们不显示"关闭"按钮的时候，需要点击遮罩也可以关闭Modal，这时通过配置closeOnClickOverlay为true即可（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调）
<u-modal :show="show" :closeOnClickOverlay="true"></u-modal>
copy
#控制模态框宽度
可以通过设置width参数控制模态框的宽度，不支持百分比，可以数值，px，rpx单位
<u-modal v-model="show" width="300px"></u-modal>
copy
#缩放效果
开启缩放效果，在打开和收起模态框的时候，会带有缩放效果，具体效果请见示例，此效果默认开启，通过zoom参数配置
<u-modal v-model="show" :zoom="false"></u-modal>
