网站搬家数据库配置,郑州企业展厅设计公司,垂直网站建设步骤,网站建设公司招聘使用框架#xff1a; vue3#xff0c;vant4
项目需求#xff1a; 需要有一个浮动气泡#xff0c;点击弹出导航菜单
遇到的问题#xff1a; 1. 使用van-floating-bubble包裹van-popover#xff0c;但点击后只会重复显示不能隐藏 2. popover位置固定#xff0c;不能根据…使用框架 vue3vant4
项目需求 需要有一个浮动气泡点击弹出导航菜单
遇到的问题 1. 使用van-floating-bubble包裹van-popover但点击后只会重复显示不能隐藏 2. popover位置固定不能根据floating-bubble改变位置
解决 1. 去掉popover绑定的v-model:show改为使用show属性 2. 使用floating-bubble的offsetChange事件获取当前的x和y判断当前浮动气泡在什么位置来修改popover的placement
代码 template:
!-- 磁吸导航 --
van-floating-bubble offset-changeonOffsetChange axisxy magneticx iconchat click.stop.preventshowPopover !showPopovervan-icon class-prefixti namebaseline-density-medium size24 /van-popover :showshowPopover :placementpopoverPlacement :offset[10, 40] :show-arrowfalseclosedshowPopoverfalseultemplate v-foritem in childTabList :keyitemli{{ item.name }}/li/template/ul/van-popover
/van-floating-bubble
javascript:
script setup
const showPopover ref(false)
// 磁吸偏移量
const popoverPlacement ref(left-end)
function onOffsetChange(offset) {const viewportWidth window.innerWidth;const viewportHeight window.innerHeight;const { x, y } offset;const horizontalCenter viewportWidth / 2;const verticalCenter viewportHeight / 2;// 判断 x, y 来设置 Popover 的弹出位置if (y verticalCenter) {// 靠近底部if (x horizontalCenter) {// 气泡在屏幕右下角Popover 向上弹出并靠右popoverPlacement.value top-end;} else {// 气泡在屏幕左下角Popover 向上弹出并靠左popoverPlacement.value top-start;}} else {// 靠近顶部if (x horizontalCenter) {// 气泡在屏幕右上角Popover 向下弹出并靠右popoverPlacement.value bottom-end;} else {// 气泡在屏幕左上角Popover 向下弹出并靠左popoverPlacement.value bottom-start;}}
}
/script
