【在js中实现网页的数据复制粘贴功能】

cv小渣渣

已于 2022-02-14 16:20:58 修改

阅读量890

点赞数

文章标签： JavaScript 复制粘贴 DOM操作 input元素 execCommand

于 2022-02-14 16:20:40 首次发布

本文链接：https://blog.csdn.net/Fairy_loves_meat/article/details/122926660

版权

在js中实现网页的数据复制粘贴功能

实现场景如图
具体实现代码如下：

<div class="step-bar1">
        <span class="icon">1</span>
        <span class="bar-one">步骤一：复制下方邀请链接
          <span id="urlAddress">{{invitationLink}}</span>
        </span>
       <span class="copy" @click="copyText(invitationLink)">复制</span>
     </div>

data() {
    return {
      value:null,
      url:null,
      invitationLink:null,
    }
  },
created() {
    this.url = serverUrl;
    this.value = this.params.detail
    if (this.url == 'http://xxxxxxxxxxx') {
      this.invitationLink = `http://xxxxxxxx?userId=${this.params.detail.id}`
    } else {
      this.invitationLink = `http://192.168.1.66:8991/xxxxxx?userId=${this.params.detail.id}`
    }
    console.log(this.params.detail,'this.params.detail')
  },
// 复制
    copyText(link) {
      let inp =document.createElement('input'); // create input标签
      document.body.appendChild(inp) // 添加到body中
      inp.value = link // 给input设置value属性为需要copy的内容
      inp.select(); // 选中
      document.execCommand('copy',false); // copy已经选中的内容
      inp.remove(); // 删除掉这个dom
      this.$message.success('复制成功')
    },