Modal 模态框

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

平台差异说明

基本使用

默认情况下，模态框只有一个确认按钮：

• 请至少要配置弹框的内容参数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组件， 就能传入富文本内容了，如下演示：

注意： 传入自定义内容的话，由于微信小程序的特殊原因，需要设置content-slot为true

<template>
    <view>
        <u-modal v-model="show" :title-style="{color: 'red'}" :content-slot="true">
            <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-close为true，当点击确定按钮的时候，按钮的文字变成一个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-able为true即可

<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的状态，随后该值被双向绑定。

Event

Method

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

Slots