Popup 弹出层

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

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

弹出层的内容通过 slot 传入，默认情况下弹出层位于页面中间。

<template>
    <fu-popup ref="popupRef">
        <div>弹出层内容</div>
    </fu-popup>

    <fu-button @click="handleOpen">打开</fu-button>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const popupRef = ref();

    // methods方法
    const handleOpen = () => {
        popupRef.value.open();
    };
</script>

设置弹出层方向

通过 mode 属性设置弹出层的方向，可选值为 top、bottom、left、right、center。

<template>
    <fu-popup ref="popupRef" mode="top">
        <div>弹出层内容</div>
    </fu-popup>

    <fu-button @click="handleOpen">打开</fu-button>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const popupRef = ref();

    // methods方法
    const handleOpen = () => {
        popupRef.value.open();

        // 也可以通过以下方式设置
        // popupRef.value.open('top');
    };
</script>

设置弹出层圆角

通过 radius 属性设置一个值来增加弹出层圆角，单位 px。

<template>
    <fu-popup ref="popupRef" mode="top" radius="10">
        <div>弹出层内容</div>
    </fu-popup>
</template>

设置弹出层内容局部滚动

如果您需要让弹窗内容局部滚动，局部固定，例如：商城底部弹出的SKU选择的场景，可以按如下思路进行处理：

• 在弹出层内容外层嵌套一个 scroll-view 组件，设置为竖向滚动，并指定高度（必须）
• 在 scroll-view 组件下方放一块无需滚动的内容，如下：

<template>
    <fu-popup ref="popupRef" mode="bottom">
        <view class="popup-content">
            <scroll-view style="height: 200px;">
                <view>
                    <view v-for="index in 10" :key="index">
                        {{ `第${index}个Iiem` }}
                    </view>
                </view>
            </scroll-view>

            <view class="popup-btn">
                <fu-button @click="handleClose">确定</fu-button>
            </view>
        </view>
    </fu-popup>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const popupRef = ref();

    // methods方法
    const handleClose = () => {
        popupRef.value.close();
    };
</script>

API

Popup Props

属性名	说明	类型	默认值	可选值
mode	弹出层方向	String	center	top/bottom/left/right/center
animation	是否开启动画	Boolean	true	false
isMaskClick	蒙版点击是否关闭弹窗	Boolean	true	false
bgColor	弹出层背景色	String	#ffffff	-
maskBgColor	蒙版背景色	String	rgba(0, 0, 0, 0.4)	-
safeArea	是否适配底部安全区	Boolean	true	false
zIndex	弹出层层级	String｜Number	997	-
showClose	是否显示关闭按钮	Boolean	false	true
closeIconPos	关闭按钮位置	String	-	-
radius	弹出层圆角	String｜Number	0	-

Popup Events

事件名	说明	回调参数
change	弹出层状态改变时触发	() => void
maskClick	蒙版点击时触发	() => void

Popup Slot

名称	说明
default	弹出层内容