@click,@click.native失效问题(原生js代码innerHTML中填充vue页面,页面中点击事件失效)

解决方式:
    window.mapVue = this
    <input onclick="window.mapVue.locusPath()" type="button" value="轨迹" class="butclass butfont"/>

-----------------------------------------------------------------------

背景:

最近使用mapbox开发时遇到弹框事件问题,代码如下:

//绑定点的弹窗
self.popupInfoWindow = new mapboxgl.Popup({
closeButton: true,
closeOnClick: false,
offset: {
bottom: [0, -34]
}
})
nrmap.on('click', 'multiPointLayer', function(e) {
var features = self.map.queryRenderedFeatures(e.point)
var reset = {
objId: 'obeid',
appNo: 'appNo'
}
self.popupInfoWindow.setLngLat(e.features[0].geometry.coordinates).setHTML(document.getElementById('orderDetail').innerHTML)
.addTo(nrmap)
})

addTo -- nrmap 原生的js innerHTML 放的是一个vue组件 组件中 @click 事件无效;
@click.native 和 js add最近使用mapbox开发时遇到弹框事件问题,代码如下:

//绑定点的弹窗
self.popupInfoWindow = new mapboxgl.Popup({
  closeButton: true,
  closeOnClick: false,
  offset: {
    bottom: [0, -34]
  }
})
nrmap.on('click', 'multiPointLayer', function(e) {
  var features = self.map.queryRenderedFeatures(e.point)
  var reset = {
    objId: 'obeid',
    appNo: 'appNo'
  }
  self.popupInfoWindow.setLngLat(e.features[0].geometry.coordinates).setHTML(document.getElementById('orderDetail').innerHTML)
    .addTo(nrmap)
})

addTo -- nrmap  原生的js innerHTML 放的是一个vue组件 组件中 @click 事件无效;
@click.native 和 js的 document.getElementById("id").addlistener('click',()=>{  }) 等等都试了 无效果。
最后使用的是:
<template>

  <div class="gjbutton">

  <input onclick="window.mapVue.locusPath()" type="button" value="轨迹" class="butclass butfont"/>
  </div>
</template>
mounted() {
window.mapVue = this
},
methods: {
  locusPath() {
   let self = this
   let data = {}
   self.bus.$emit('dr-order-locus', data)
  },
}




posted @ 2022-01-04 16:49  A影子放風箏  阅读(1243)  评论(0编辑  收藏  举报
// 侧边栏目录 // https://blog-static.cnblogs.com/files/douzujun/marvin.nav.my1502.css