更新记录
1.8.5(2025-04-29)
下载此版本
1.8.5
修复箭头指示问题
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
<AboutPopover :auto-adjust="false" direction="top">
<template #trigger>
<view class="">
触发区域
</view>
</template>
<template #content>
<view class="main-btn-box br-12" style="width: 200rpx;">
<u-button @click="close">
<text class="ml-10 f-24 fw-400" style="line-height: 32rpx;">关闭</text>
</u-button>
</view>
</template>
</AboutPopover>
close(){
this.$refs.popover.close()
},
top
↓
┌──────────────────────────┐
│ │
│ │
│ │
left → │ 目标元素位置 │← right
│ │
│ │
│ │
└──────────────────────────┘
↑
bottom
### props
| 值 | 值说明 | 适用场景 |
|-----------------|-----------------------------|--------------------------|
| direction | 弹出方向 | top ,bottom,left,right |
| hoverColor | 遮罩背景色 | rgba(0, 122, 255, 0.1) |
|-----------------|-----------------------------|--------------------------|
### 基础方向值(4个)
| 值 | 说明 | 适用场景 |
|-----------------|------------------------------|--------------------------|
| `top` | 顶部居中 | 触发元素上方空间充足时 |
| `bottom` | 底部居中 | 触发元素下方空间充足时 |
| `left` | 左侧居中 | 触发元素左侧空间充足时 |
| `right` | 右侧居中 | 触发元素右侧空间充足时 |
|-----------------|-----------------------------|------------------------------|
### 说明
该组件指示箭头会根据触发区域自动居中展示,所以只有四个方向的位置,