信息窗口内容
// 信息窗口内容
infoWindow() {
let opts = {
width: 300, // 信息窗口宽度
height: 220, // 信息窗口高度
};
let content = `
<div style="margin-top: 5px;">
最后位置:${
this.addComp}
<button style="color:#337ab7;" type="button" class="pointBtn" id="pointBtn">(坐标)</button>
</div>
<div style="margin-top: 5px;display:none" id="target">
<p>
经度:${
this.addData.latitude},
纬度:${
this.addData.longitude}
</p>
</div>
`;
setTimeout(() => {
try {
document.getElementById("pointBtn").onclick = () => {
this.copyPoint(0, document.getElementById("pointBtn").title);
};
} catch (error) {
}
}, 0);
在copyPoint()方法中,要使用原生js方法来实现复制功能
// 主要是通过动态创建一个 input 框,把要复制内容放到 input 框里,
// 然后手动控制选中,在调用浏览器的 copy 方法
copyPoint() {
console.log('你想做的事')
let text = document.getElementById("target").innerText;
let inputElement = document.createElement("input");
inputElement.value = text;
document.body.appendChild(inputElement);
inputElement.select();
document.execCommand("copy"); //执行浏览器复制命令,这里在项目中显示划掉,但是不影响结果
inputElement.remove();
console.log("复制成功");
},
踩坑经验
我有看到网上有使用vue-clipboard2、clipboard这两个插件来实现的方法,但是我怎么用都不行,然后看到一篇文章有写clipboard.js已经废弃,不知道是不是这个原因,所以后来就改用了原生的方法来实现。