js 拼接模板字符串里面写事件带传参
作者:互联网
js 拼接模板字符串里面写事件带传参
我是在高德地图的弹窗里面写的,我只传了一个参数,(我把对象转成字符串传的时候会报错(应该要转义什么的),所以只传了一个参数)还有方法要写在监听点击mark的方法里面,不然不生效
if (v.hasEquipment && v.equipmentList && v.equipmentList.length > 0) {
let bdpoint = this.bdencrypt(v.longitude, v.latitude) // 坐标转换
let point = new BMapGL.Point(...bdpoint)
pointArr.push(point)
let marker = new BMapGL.Marker(point, {
icon: myIcon1
});
map.addOverlay(marker); // 绘制点坐标
let pamsList = ``
let atr = ''
v.equipmentList.forEach((item, index) => {
atr = JSON.stringify(item)
if (item.status === '0') {
this.normalEquipmentData.push({name:item.equipmentName,id:item.id})
this.zcsb++
pamsList += `
<tr>
<th align="center">${index+1}</th>
<th align="center">${item.equipmentName}</th>
<th align="center" style="color: #30DA74">正常</th>
<th align="center" ><input id="btn" style="width: 60px;margin: 5px 0" type="button" value="详情" onclick="btnDetail('${item.id}')" /></th>
</tr>
`
}else {
this.abnormalEquipmentData.push({name:item.equipmentName,id:item.id})
this.ycsb++
pamsList += `
<tr>
<th align="center">${index+1}</th>
<th align="center">${item.equipmentName}</th>
<th align="center" style="color: #F56580">异常</th>
<th align="center" ><input id="btn" style="width: 60px;margin: 5px 0" type="button" value="详情" onclick="btnDetail('${item.id}')" /></th>
</tr>
`
}
})
let inner = `
<p style="padding: 10px 0">站点名称:${v.name}</p>
<table width="380" border="1" style="border-collapse: collapse;">
<tr>
<th align="center">序号</th>
<th align="center">设备名称</th>
<th align="center">状态</th>
<th align="center">操作</th>
${pamsList}
</table>
`
let infoWindow = new BMapGL.InfoWindow(inner, this.opts); // 创建信息窗口对象
marker.addEventListener('click', () => {
map.openInfoWindow(infoWindow, point); // 开启信息窗口
// 图片加载完毕重绘infoWindow
// document.getElementById('imgDemo').onload = function () {
// infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小,导致图片部分被隐藏
// };
window.btnDetail =(i)=> {
// this.detailEquipmentData = v.equipmentList[i]
let id = i
console.log(id)
this.detailEquipmentFlag = true
// console.log(v.equipmentList[i])
// console.log(this.normalEquipmentFlag)
}
});
}
标签:point,equipmentList,js,item,let,带传参,infoWindow,id,模板 来源: https://blog.csdn.net/qq706352062/article/details/111634496