更新记录
1.0.5(2025-04-11) 下载此版本
uni_modules
1.0.4(2025-04-11) 下载此版本
添加示例
1.0.3(2025-04-11) 下载此版本
更新目录结构
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.96 app-vue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
√ | √ | √ | √ | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
用法
<vast-popover ref="popover">
<button>test</button>
<template v-slot:content>
<view style="padding: 20rpx;width: 200rpx">
<button type="primary" @click="close"
style="color:#ffffff;background-color:#1AAD19;border-color:#1AAD19">关闭
</button>
<button type="primary" @click="close" style="margin-top: 10rpx;">关闭</button>
</view>
</template>
</vast-popover>
close(){
this.$refs.popover.close()
},
top-start top top-end
↓ ↓ ↓
┌──────────────────────────┐
│ │
left-start →│ │← right-start
│ │
left → │ 目标元素位置 │← right
│ │
left-end → │ │← right-end
│ │
└──────────────────────────┘
↑ ↑ ↑
bottom-start bottom bottom-end
### 基础方向值(9个)
| 值 | 说明 | 适用场景 |
|-----------------|-----------------------------|----------------------|
| `auto` | 自动计算最佳位置(默认值) | 需要智能定位时 |
| `top` | 顶部居中 | 触发元素上方空间充足时 |
| `top-start` | 顶部左对齐 | 触发元素左上角位置 |
| `top-end` | 顶部右对齐 | 触发元素右上角位置 |
| `bottom` | 底部居中 | 触发元素下方空间充足时 |
| `bottom-start` | 底部左对齐 | 触发元素左下角位置 |
| `bottom-end` | 底部右对齐 | 触发元素右下角位置 |
| `left` | 左侧居中 | 触发元素左侧空间充足时 |
| `left-start` | 左侧顶部对齐 | 触发元素左上侧位置 |
| `left-end` | 左侧底部对齐 | 触发元素左下侧位置 |
| `right` | 右侧居中 | 触发元素右侧空间充足时 |
| `right-start` | 右侧顶部对齐 | 触发元素右上侧位置 |
| `right-end` | 右侧底部对齐 | 触发元素右下侧位置 |
|-----------------|-----------------------------|------------------------------|
### 使用建议
1. **常规使用**:直接使用基础方向值
2. **智能定位**:使用`auto` + 方向组合值(代码自动计算)
3. **精确控制**:使用带`-start`/`-end`后缀的精准定位值