js实现一键复制到剪切板-copy
废话少说比较简单直接上代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button onclick='linkUrl()'>一键复制模板</button>
<script>
function linkUrl(){
let url = 'www.baidu.com';
//拿到想要复制的值
let copyInput = document.createElement('input');//创建input元素
document.body.appendChild(copyInput);//向页面底部追加输入框
copyInput.setAttribute('value', url);//添加属性，将url赋值给input元素的value属性
copyInput.select();//选择input元素
document.execCommand("Copy");//执行复制命令
console.log("链接已复制！");//弹出提示信息，不同组件可能存在写法不同
//复制之后再删除元素，否则无法成功赋值
copyInput.remove();//删除动态创建的节点
}
</script>
</body>
</html>
Vue项目同理，简单调整
<button @click='linkUrl(item)'>点击复制</button> linkUrl(item){ let url = item.url;//拿到想要复制的值 let copyInput = document.createElement('input');//创建input元素 document.body.appendChild(copyInput);//向页面底部追加输入框 copyInput.setAttribute('value', url);//添加属性，将url赋值给input元素的value属性 copyInput.select();//选择input元素 document.execCommand("Copy");//执行复制命令 this.$message.success("链接已复制！");//弹出提示信息，不同组件可能存在写法不同 //复制之后再删除元素，否则无法成功赋值 copyInput.remove();//删除动态创建的节点 }
了解更多可以关注 我的语雀 哦！来这里找找看有没有你想要的答案呢？每天更新 新的知识点，细节中！
