vue 中拼接html时添加点击事件

在vue 的html拼接在添加点击事件用原生的onclick来触发事件,将事件挂在window上

<template>
<div>
   
    <el-button @click="hahha">
        添加
    </el-button>
    <div style="height:500px;width:1000px;background:#666;" class="circle">
            1111
    </div>

</div>
</template>
<script>
export default {
  data() {
    return {
        tooltip:"test",
      
     
    };
  },
  methods: {
      hahha(){
          var item=this
          debugger
          item.tooltip
          var circle = $(".circle");
                                                                                                                                                                                                                                                                                                                                        // onclick=atlas_edit('+v.pk_atlas_main+',"'+v.name+'")   '+onclick=bimshowinfo() +'                                                                                     
          circle[0].innerHTML=`<div class="leadTips"><img src="http://static.bimface.com/attach/24ce9654e88a4218908f46279e5c4b04_line.png" height="35" width="49"/><div class="leadText"><span class="canvspna"><span style="display: block;float:left">${item.tooltip}</span> <span style="display: block;float:right;color:#3aa1fe;cursor: pointer;;"></i><i class="iconfont icon-hao1" style="margin-left:10px;margin-right:20px;font-size:25px;"  onclick="closebimface()"  ></i> </span></span><div id="canvasDiv" class="ecanvasDiv"></div></div></div>`
           window.closebimface =function(){ 
            console.log("ssss")
          }
      },
    
  },
 
};
</script>
<style >

.leadTips {display: flex; justify-content: start; width: auto; transform: translateY(-40px);width:1000px;height:300px;}
    .leadTips img {display: inline-block; width: 49px; height: 40px}
    .leadText {display: block; background: #fff; color: #fff; padding: 10px;width:800px;height: 300px;}
    .ecanvasDiv{width:800px;height: 280px;}
    .canvspna{
      width: 785px;
    height: 28px;
    line-height: 28px;
      color:#409eff;
    }
</style>
发布了42 篇原创文章 · 获赞 13 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/wzwzwz555/article/details/101274845