vue-cli项目使用百度地图信息窗口,实现点击链接复制链接内容功能

信息窗口内容

// 信息窗口内容
    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已经废弃,不知道是不是这个原因,所以后来就改用了原生的方法来实现。

猜你喜欢

转载自blog.csdn.net/ARLENE2/article/details/123904603
今日推荐