Popup 弹出层

弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义

平台差异说明

基本使用

• 弹出层的内容通过slot传入，由用户自定义
• 通过v-model绑定一个布尔值的变量控制弹出层的打开和收起

<template>
    <u-popup v-model="show">
        <view>出淤泥而不染，濯清涟而不妖</view>
    </u-popup>
</template>
<script>
    export default {
        data() {
            return {
                show: false
            }
        }
    }
</script>

设置弹出层的方向

• 可以通过mode参数设置，可以设置为left、top、right、bottom、center

<template>
    <u-popup v-model="show" mode="top">
        <view>
            人生若只如初见，何事秋风悲画扇
        </view>
    </u-popup>
</template>

设置弹出层的圆角

可以给border-radius设置一个值来给弹窗增加圆角，单位rpx。

<template>
    <u-popup v-model="show" mode="top" border-radius="14">
        <view>
            人生若只如初见，何事秋风悲画扇
        </view>
    </u-popup>
</template>

控制弹窗的宽度 | 高度

这里说的宽度，指的是左边，右边，中部弹出的场景，高度指的是顶部和底部弹出的场景(因为这两个场景宽度都是100%)。
uView提供了length来控制此种情况，此值可以是数值(单位rpx)，auto，百分比等，内部会自动处理对应的逻辑。 如果为auto的时候，表示弹窗的宽度 | 高度由内容撑开。

<template>
    <u-popup v-model="show" mode="top" length="60%">
        <view>
            等闲变却故人心，却道故人心易变
        </view>
    </u-popup>
</template>

API

Props

注意：props中没有控制弹窗打开与收起的参数，因为这是通过v-model绑定变量实现的，见上方说明。

Event