更新记录

1.0.6（2025-05-26） 下载此版本

fix: 自动定位计算优化

1.0.5（2025-05-23） 下载此版本

feat: 支持配置相对定位容器containerRect配置，popover将相对这个容器进行定位计算 refactor: popover计算算法优化

1.0.4（2025-05-21） 下载此版本

feat: popover溢出处理优化-增加边界间距boundaryPadding属性

平台兼容性

uni-app

说明

basic-popover 组件提供一个基础弹出框，目前只考虑在小程序中使用，需要向下/向上/向左/向右弹出，同时自动根据屏幕进行弹出位置调整，涉及触发器和弹出框的定位计算。

层级问题：如果使用组件嵌套层级太深，建议配置 <root-portal> 组件

示例

基础用法

<template>
    <button id="tirgger" @click="onTrigger">trigger</button>
    <root-portal>
        <basic-popover
            v-model="visible"
            :target-rect="triggerRect"
            :z-index="101"
            :offset="12"
        >
            <scroll-view :scroll-x="false" :scroll-y="true" style="height: 400px">
                <view v-for="row in dataSource" class="flex justify-between">
                    <text class="text-title">{{ row.name }}</text>
                    <text class="text-description">{{ row.datetime }}</text>
                </view>
            </scroll-view>
        </basic-popover>
    </root-portal>
</template>

const instance = getCurrentInstance();
const visible = ref(false);
const triggerRect = ref(null);
const dataSource = ref([]);

function onTrigger() {
    const query = uni.createSelectorQuery().in(instance);
    query.select('#tirgger').boundingClientRect(info => {
        triggerRect.value = info;
        visible.value = true;
    }).exec();
}

带遮罩

设置 show-mask 控制遮罩展示，mask-color 可定义遮罩颜色

<template>
    <root-portal>
        <basic-popover
            v-model="visible"
            :target-rect="triggerRect"
            :z-index="101"
            :offset="12"
            :full-mask="false"
        >
            <!--slot-->
        </basic-popover>
    </root-portal>
</template>

带挖空遮罩

show-mask 必须为 true 才生效，可通过 full-mask 控制是否展示满屏遮罩还是带挖空遮罩。挖空遮罩可通过 mask-mode 控制实现方式。只有 shadow 模式才可以绘制带圆角。

<template>
    <root-portal>
        <basic-popover
            v-model="visible"
            :target-rect="triggerRect"
            :z-index="101"
            :offset="12"
            :full-mask="false"
        >
            <!--slot-->
        </basic-popover>
    </root-portal>
</template>

Props

Slots

Exposes