更新记录

1.0.0（2026-10-12） 下载此版本

  • 初始版本：新增 vant-popover 气泡弹出组件。
  • 支持 top / bottom 及 start / end 组合共六个方位。
  • 支持 click 触发与 manual 受控（v-model:show）两种模式。
  • 支持 light / dark 双主题，菜单项可禁用。
  • 弹出层采用 CSS 绝对定位（relative 父 + absolute 子 + transform 居中），不依赖 JS 测量节点尺寸。

平台兼容性

uni-app(3.8.5)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- √ √ √ √ √ √ √ √
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ √ √ √ √ √ √ √ √ √ √ √

uni-app x(3.8.5)

Chrome Safari Android iOS 鸿蒙 微信小程序
- - - - - -

其他

多语言 暗黑模式 宽屏模式 蒸汽模式
× × √ ×

vant-popover 气泡弹出

轻量、可定制的气泡弹出组件，包裹引用元素并弹出操作菜单。基于 vant-ui 设计令牌（$uni-*）构建，支持 top / bottom 及 start / end 组合的六个方位，浅色 / 深色双主题。零业务耦合：所有行为通过 v-model:show 与 select 事件外抛。

Props

属性 类型 默认值 说明
show boolean false 是否显示弹出层，支持 v-model:show 双向绑定
placement 'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' 'bottom' 弹出方向
actions PopoverAction[] [] 菜单项列表，每项含 text、icon?、disabled?、value?
trigger 'click' \| 'manual' 'click' 触发方式：click 点击引用区切换；manual 由 v-model:show 控制
theme 'light' \| 'dark' 'light' 主题
offset number 8 弹出层与引用区的间距（px）

PopoverAction

interface PopoverAction {
  text: string
  icon?: string
  disabled?: boolean
  value?: string | number
}

Events

事件 回调参数 说明
update:show (v: boolean) 显隐变化（点击引用区、遮罩、菜单项时触发），用于 v-model:show
select (action: PopoverAction, index: number) 点击菜单项时触发（禁用项不触发），参数为该项与索引

Slots

插槽 说明
默认插槽 引用区内容（作为定位锚，如按钮 / 标签）

用法

<vant-popover
  v-model:show="show"
  placement="bottom-start"
  :actions="[{ text: '分享' }, { text: '删除', disabled: true }]"
  @select=""
>
  <vant-button>操作</vant-button>
</vant-popover>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。