使用el-amap-info-window遇到的问题

使用的这个库https://github.com/yangyanggu/vue-amap

想要滚动amapInfoWindow里的内容,但不触发地图缩放

默认滚动amapInfoWindow里的内容,会触发地图缩放。看了C站一个大佬的文章解决了。

amapInfoWindow会自动滚动到顶部

我的amapInfoWindow里面用了el-table,并且el-table里的每一行都加了勾选框。勾选后,amapInfoWindow会自动滚动到顶部。

我的解决思路是在上一个问题解决方案中的mousewheel监听中,记录弹框的scrollTop。

代码

复制代码
const infoWindowRef = ref()
const infoWindowObj = ref()
const infoWindowScrollTop = ref(0)
// 信息窗口打开后 el-amap-info-window的open回调方法
function handleInfoWindowOpen(){
  infoWindowObj.value = infoWindowRef.value.$$getInstance()
  // 弹框打开后地图禁止缩放
  infoWindowObj.value.on('mouseover', () => mapObj.value.setStatus({ zoomEnable: false }))
  infoWindowObj.value.on('mouseout', () => {
    mapObj.value.setStatus({ zoomEnable: true })
  })
  infoWindowObj.value.on('mousewheel', (e) => {
    const { originEvent } = e
    document.querySelector('.amap-info-content').scrollTop -= originEvent.wheelDelta / 5
    // 监听滚动高度
    infoWindowScrollTop.value = document.querySelector('.amap-info-content').scrollTop
  })
}

// 刷新table,防止滚动条跑到最上面
function refreshTable() {
  setTimeout(() => {
    document.querySelector('.amap-info-content').scrollTop = infoWindowScrollTop.value
  }, 0)
}

// 勾选框回调方法
function handleSelect(selection, row) {
  refreshTable()
  ......
  其他逻辑
 }
相关推荐
mCell14 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip14 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping19 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风20 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780021 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端21 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧21 小时前
Promise 的使用
前端·javascript
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅1 天前
JavaScript 作用域
前端·javascript
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试