问题场景

代码如下；百度地图中添加标注弹出框时需要拼接html

 var sContent ="<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" + "<img style='float:right;margin:4px' id='imgDemo' src='../img/tianAnMen.jpg' width='139' height='104' title='天安门'/>" + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" + "</div>";var map = new BMap.Map("allmap");var point = new BMap.Point(116.404, 39.915);var marker = new BMap.Marker(point);var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象map.centerAndZoom(point, 15);map.addOverlay(marker);marker.addEventListener("click", function(){          this.openInfoWindow(infoWindow);//图片加载完毕重绘infowindowdocument.getElementById('imgDemo').onload = function (){infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏}});

解决办法

而这时如果用@click的话是无效的，不会被当做vue模板进行编译的，也不能调用methods里面的方法，这个时候就必须要用原生的onclick来触发事件，将事件挂在window上

var sContent ="<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>社区名称：xxx</p>" +"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>包含户数：1245户</p>" +"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>风险等级：<span class='riskLevelText-yellow'>一般风险（黄色）</span></p>" +"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>风险点数：123个</p>" +"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>风险评分：24分(LECD)</p>" +"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>负 责 人：王子睿</p>" +"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>联系电话：13855441122</p>" +"<el-button class='selfBtn mapInfoBtn' οnclick='inToCommunity()'>进入社区</el-button>";var infoWindow = new BMap.InfoWindow(sContent,{height:0});  // 创建信息窗口对象marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow);});

然后需要在mounted钩子函数中把windows方法指向vue中的方法，这样就可以用vue中的数据

methods: {inToCommunity(){//这里就用用vue中的数据了//this.xxx=xxx;}
},mounted() {window.inToCommunity = this.inToCommunity;
}

vue拼接html并绑定点击事件相关推荐

Web前端-Vue ElementUI el-input组件绑定点击事件
1.element中el-input组件事件 <el-input v-model="value" v-on:change="handleChange"&g ...
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...
jquery 动态按钮绑定点击事件
一.Jquery实现点击事件的四种写法来自:https://blog.csdn.net/liutianjie/article/details/85112787 1. $(".tab&quo ...
[Swift]最强UIButton解析 | #selector()绑定点击事件
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
react中绑定点击事件_在React中绑定事件处理程序的最佳方法
react中绑定点击事件 by Charlee Li 通过李李在React中绑定事件处理程序的最佳方法 (The best way to bind event handlers in React) ...
JavaScript给按钮绑定点击事件（onclick）的方法及js常见事件
本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法.分享给大家供大家参考.具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!D ...
javascript动态生成按钮并绑定点击事件
前一个多月公司的前端开发人员离职,公司一直在招前端,基本上每天都有几个来面试的人,就这个面试频率,也才招了一个多月才招到.绝大部分都是死在了一道上机面试提上.题目很基础,但也很考基本功,基本上才3%左 ...
【JavaScript】按钮绑定点击事件-onCliek事件
[JavaScript]按钮绑定点击事件-onCliek事件 <button type="submit" id="btn">btn</butt ...
jQuery动态添加按钮，绑定点击事件失效
jQuery动态添加按钮,绑定点击事件失效因为需求需要给页面动态添加按钮并绑定点击事件进行操作, 但是发现绑定的点击事件失效. 原因分析: append中的节点是在整个文档加载完之后开始添加,因此页 ...

vue拼接html并绑定点击事件

问题场景

解决办法

vue拼接html并绑定点击事件相关推荐

最新文章

热门文章