方法适用Vue.js和Vue-cli
先来说一下我的应用场景, 使用leaflet地图时, 点击地图的标注点弹出一个信息框, 里面有个按钮, 这时问题就来了, 这个api是需要传一段html进去的, 里面包含调用vue实例的方法
res.data.forEach(item => {
this.markerPoint(item.locs[0].lat, item.locs[0].lng, carMakerIcon,
`
<h2 style="text-align: center;">车辆信息</h2>
<div><b>车牌号码</b>:${item.locs[0].name}</div>
<div><b>分组名称</b>:${item.locs[0].dept}</div>
<div><b>位置时间</b>:${item.locs[0].gpstime}</div>
<div><b>所在位置</b>:${item.locs[0].info}</div>
<div><b>方向</b>:${item.locs[0].direct}</div>
<div><b>状态</b>:${item.locs[0].state}</div>
<div><b>行驶里程</b>:${item.locs[0].distance} km</div>
<div><b>行驶总里程</b>:${item.locs[0].totalDis} km</div>
<div style="margin-top: 10px;text-align: right">
<button @click="getVehiclesHisData('${item.vid}','${item.vKey}')">运动轨迹</button></div>
`);
})
可以看到最后一行, 我使用了@click, 但是vue不会编译html字符串的, 导致点击事件无效, 所以只能另寻办法
如果是只有一个点的情况下就好解决, 但是现在我是多个点要动态生成
于是找到一种目前能完美解决方法, 但不太规范
在初始化页面时将vue的实例对象赋值到全局变量中
<script>
export default {
data() {
return {
}
},
mounted() {
//this是当前vue实例对象
window.mapVue = this;
}
}
</script>
然后我html的的字符串中不再使用@click, 这时候使用onclick原生的方式调用js
res.data.forEach(item => {
this.markerPoint(item.locs[0].lat, item.locs[0].lng, carMakerIcon,
`
<h2 style="text-align: center;">车辆信息</h2>
<div><b>车牌号码</b>:${item.locs[0].name}</div>
<div><b>分组名称</b>:${item.locs[0].dept}</div>
<div><b>位置时间</b>:${item.locs[0].gpstime}</div>
<div><b>所在位置</b>:${item.locs[0].info}</div>
<div><b>方向</b>:${item.locs[0].direct}</div>
<div><b>状态</b>:${item.locs[0].state}</div>
<div><b>行驶里程</b>:${item.locs[0].distance} km</div>
<div><b>行驶总里程</b>:${item.locs[0].totalDis} km</div>
<div style="margin-top: 10px;text-align: right">
<button οnclick="getVehiclesHisData('${item.vid}','${item.vKey}')">运动轨迹</button></div>
`);
})
在vue实例外声明一个js 方法, 然后再调用vue里面的东西, window.mapVue 就相当于平时vue里面this那样正常使用, 外部的js只是起到一个代理作用
<script>
export default {
data() {
return {
}
},
mounted() {
//this是当前vue实例对象
window.mapVue = this;
},
methods:{
getVehiclesHisData(vid, vKey){
console.info(`vue => ${vid}, ${vKey}`)
}
}
}
window.getVehiclesHisData = function (vid, vKey){
console.info(`js => ${vid}, ${vKey}`)
//通过全局调用vue实例对象
window.mapVue.getVehiclesHisData(vid, vKey);
}
</script>
终极写法 : 甚至懒一点连js都被不用写了, 直接调用全局Vue实例
<button onclick="window.mapVue.getVehiclesHisData('${item.vid}','${item.vKey}')">运动轨迹</button>