凌云UI 使用手册
接入
组件
图表
页面
  • 总览
  • 组件 1.0.42
  • 图表 1.0.27
  • 页面包 1.0.3
GitHub
接入
组件
图表
页面
  • 总览
  • 组件 1.0.42
  • 图表 1.0.27
  • 页面包 1.0.3
GitHub
  • 组件

    • 目录
  • 页面与导航

    • 页面壳
    • 窄屏
    • 平板与电脑
    • 宽屏目录
    • 顶栏
    • 主题切换
    • 底栏
    • 搜索栏
    • 侧栏浮层
  • 基础控件

    • 布局
    • 按钮
    • 图标
    • 角标
    • 分段控件
    • 标签
    • 筛选胶囊
    • 文本
    • 图片
    • 头像
    • 分页点
  • 表单

    • 输入框
    • 表单
    • 表单分组
    • 表单行
    • 开关
    • 步进器
    • 日期切换器
    • 复选框
    • 单选
    • 单选组
    • 多选列表
    • 单选列表
    • 滑条
    • 选择器
    • 日期选择器
    • 级联选择
  • 列表与内容

    • 列表
    • 列表行
    • 分组卡片
    • 表格
    • 滑动容器
    • 滑动行
    • 空状态
    • 骨架屏
    • 下拉刷新
    • 宫格
    • 索引列表
  • 反馈

    • 加载转圈
    • 进度
    • 轻提示
    • 加载遮罩
    • 反馈宿主
  • 浮层

    • 弹窗
    • 底部面板
    • 操作列表
    • 分享面板
    • 气泡
    • 菜单
    • 上下文菜单
    • 悬浮按钮
    • 商品导航

lingyun-popover

锚在触发器旁边的气泡。触发器放在名为 trigger 的插槽里,气泡内容放默认插槽。箭头始终指向触发器中心。

示例

触发器上要自己绑 @click="toggle"。组件外层不监听点击,小程序里自定义组件的点击也不会冒泡。

<lingyun-popover v-model:show="open" placement="bottom" :width="240">
  <template #trigger="{ toggle }">
    <lingyun-button text="更多" @click="toggle" />
  </template>
  <view>说明文字</view>
</lingyun-popover>

触发点不在组件里时(如表格表头的图标),不放 trigger 插槽,改传 anchor,自己控制 show:

<lingyun-popover
  v-model:show="open"
  :anchor="iconRect"
  arrow-align="trailing"
  :width="320"
>
  <view>筛选内容</view>
</lingyun-popover>

iconRect 是视口坐标 { left, top, width, height },可以用 uni.createSelectorQuery() 的 boundingClientRect 量出来。

属性

属性说明默认值
show / modelValue是否打开—
placement相对触发器的方向:top / bottom / left / right。这一侧放不下时翻到对侧bottom
showArrow显示箭头true
width面板宽度(px)。0 跟触发器,并限制在 160–2800
fullWidth全宽面板:手机铺满可用宽度,PC / PAD 上限 400;优先于 widthfalse
arrowAlign箭头落在面板哪一侧:auto / middle 居中,leading 靠前(面板向后展开),trailing 靠后(面板向前展开)。箭头都指向触发器auto
maskClosable点外面关闭true
zIndex层级1100
variantmenu:菜单面板(圆角 32、内边距 10),给 lingyun-menu 用—
anchor视口坐标矩形 { left, top, width, height }。传了就指向它,不再量 trigger 插槽null
estimateHeight面板预估高度(px),只用来判断要不要翻到上方。0 用默认值0

插槽

插槽说明
trigger触发器。作用域参数 { show, toggle }
默认气泡内容

事件

事件说明
update:show开关
update:modelValue开关(配合 v-model)
close关闭时触发
Edit this page
最近更新: 2026/11/6 18:36
Contributors: qiu, Claude Fable 5
Prev
分享面板
Next
菜单