更新记录

1.0.0（2026-08-21） 下载此版本

1.0.0 (2026-08-21)

平台兼容性

uni-app(3.8.2)

SeaPopover

一款轻量、智能定位的弹出菜单组件，为 uni-app 应用提供优雅的 Popover 体验。

特性

• 🎯 自动智能定位 – 自动选择最佳弹出方向（上下左右及 -start/-end），避免溢出屏幕。
• 🎨 主题可配 – 支持浅色/深色主题，也可自定义背景色。
• ⌨️ 键盘支持 – 支持 Enter 键切换和选择，提升可访问性。
• 🔧 高度可配置 – 可自定义间距、可见比例、动画时长等。
• 📱 全端兼容 – 支持 App、H5、各小程序平台。
• 🌐 对象选项支持 – 通过 value-key 灵活比对对象数据。

快速开始

安装

1. 通过 uni-app 插件市场安装（推荐）

在 HBuilderX 中，点击 插件市场 → 搜索 sea-popover → 点击安装即可。

2. 手动下载

将插件文件夹 sea-popover 放入项目的 uni_modules 目录。

3. npm 安装（如果已发布到 npm）

npm install sea-popover

使用

在页面中引入组件（如果使用 uni_modules 自动注册则无需手动引入）：

<template>
  <view>
    <SeaPopover
      v-model="selectedValue"
      :options="options"
      value-key="id"
      placement="auto"
      theme="light"
      @handleClick=""
    >
      <!-- 触发器插槽 -->
      <button>点击我</button>
    </SeaPopover>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: { id: 1, name: '选项一' },
      options: [
        { id: 1, name: '选项一' },
        { id: 2, name: '选项二' },
        { id: 3, name: '选项三' },
      ],
    };
  },
  methods: {
    (show) {
      console.log('Popover 打开状态：', show);
    },
  },
};
</script>

自定义内容

通过 content 插槽完全自定义弹出层内容：

<SeaPopover>
  <button>点击</button>
  <template #content>
    <view style="padding: 20rpx;">自定义内容，可以是任何视图</view>
  </template>
</SeaPopover>

API

Props

Events

Slots

注意事项

• 组件依赖 scss，请确保项目已支持。
• 在自定义内容插槽中，组件不会自动处理点击关闭逻辑，你需要自己管理 show 状态。
• 在 H5 端，若遇到遮罩层点击关闭不生效，检查是否被其他元素遮挡。

更新日志

详见 changelog.md

许可

MIT