vue手动挂载$mount

最新推荐文章于 2024-07-05 09:48:05 发布

秃头的广东靓仔

最新推荐文章于 2024-07-05 09:48:05 发布

阅读量1k

点赞数

文章标签：前端 vue-cli3

本文链接：https://blog.csdn.net/weixin_41857258/article/details/122344844

版权

使用vue-cli项目时封装了一个高德地图的js，并且使用了Vue.prototype属性，内部创建高德自定义窗体时content挂载了html语句，此时html语句中使用了onclick想调用js自定义方法时失效（方法必须为全局方法，所以无法调用js内部方法）

解决方法：通过全局API：Vue.extend注册组件并实例化$mount(),挂载（.$el）在自定义窗体content上,在组件定义的方法中调用地图自定义方法，代码如下

Vue.prototype.gdMapFunction = {
  searchWeiZhiJieGuo(lnglatArray){
    var MyComponent = Vue.extend({
	  template: '<div @click="clearWeiZhiMarker">X</div>',
	  methods: {
	     clearWeiZhiMarker(){
			 this.gdMapFunction.clearWeiZhiMarker();
		 },
	   }
	 });
    var component = new MyComponent().$mount();
	weizhiWindow = new AMap.InfoWindow({
		isCustom: true, 
		content: component.$el, 
		position: lnglatArray,
	}); 
	weizhiWindow.open(map);
 }
 clearWeiZhiMarker() {
	weizhiWindow.close();
 },

}