Skip to main content
 首页 » 编程设计

JS实现复制框里的内容

2022年07月16日28zfyouxi
html:
<span class="kuang" disabled>www.baidu.com</span> 
<span class="button" data-clipboard-text="www.baidu.com" @click="copy">复制邀请码</span>

vue:

<span class="kuang" disabled>{{url}}</span> 
<span class="button" :data-clipboard-text="url" @click="copy">复制邀请码</span>
css:
.kuang { 
  display: inline-block; 
  border: 1px #eee solid; 
  width: 460px; 
  height: 14px; 
  padding: 12px 20px; 
  color: #999; 
}
.button {
    height: 40px;
    float: right;
    border: 1px solid #4e83ef;
    border-left: none;
    border-radius: 0;
    background: #4e83ef;
    color: #fff;
    }
 

js:

copy() { 
      var clipboard = new Clipboard(".button"); 
      clipboard.on("success", e => { 
        this.$message.success("复制成功快去邀请好友吧!"); 
        // 释放内存 
        clipboard.destroy(); 
      }); 
      clipboard.on("error", e => { 
        // 不支持复制 
        this.$message.error("该浏览器不支持自动复制"); 
        // 释放内存 
        clipboard.destroy(); 
      }); 
    }

本文参考链接:https://www.cnblogs.com/wulicute-TS/p/11915586.html