vue 实现点击复制功能（不使用插件）

在业务需求中，需要实现点击复制链接的功能

话不多说，直接上代码

// 这是在template中的代码
<div class="profile_inner_middlelink">
   <div class="profile_inner_middlelink_http">
     {{httpLink}}
   </div>
   <el-button type="primary" @click="handleCopy()" plain>复制链接</el-button>
 </div>

//data 中声明变量
data() {
	return {
      httpLink: "https://www.baidu.com/",
    }
}

methods方法：

handleCopy() {
  this.copy(this.httpLink)
},
copy(data) {
  let url = data;
  let oInput = document.createElement('input');
  oInput.value = url;
  document.body.appendChild(oInput);
  oInput.select(); // 选择对象;
  console.log(oInput.value)
  document.execCommand("Copy"); // 执行浏览器复制命令
  this.$message({
    message: '复制成功',
    type: 'success'
  });
  oInput.remove()
},